be heald
学科 レイアウトデザイン基礎②
今日のテーマ
スマホ対応はCSSの延長線です
レスポンシブWEBデザイン（RWD）とは？
「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます
one point
昨今のWEbサイトでレスポンシブWEBデザインは必須とも言える技術になる。使い方がさまざまだが、特にメディアクエリはCSSの基礎理解がとても重要になる。シンプルに整理して覚えていこう。
今日の課題
ワイヤーフレームからデザインラフの作成に向け。世の中のサイトを参考に情報収集しながらレイアウトやキャッチコピー、文書を考えておこう。
実業 WEBデザイン実習①
今日のテーマ
ワイヤーフレームを作成してみよう
制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけ。まずは、PCサイズとしてコンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみよう。
one point
ワイヤーフレームの段階では、お仕事の契約位立に至っていない場合が多い。逆を言えば、しっかりしたワイヤーフレームを作成できるということは、「仕事を獲得できる力がある」という証明にもなる。お客様のご要望（相手お気持ち）をしっかり理解することを心がけて、制作してみよう。
今日の課題
白黒のワイヤーフレームを作成し、できたところまでWordPressにアップする。
作成したワイヤーフレーム
作成のポイント
架空のフレグランサイトを作成します。
こだわったところとしては、シンプルでナチュラルになるように、商品を正方形に表示し、香りのタイプとフレグランスの種類で分けました。
ロゴや、キャッチコピーは上部に持ってきて、インパクトになるようにしました
今日のテーマ
Webサイト制作にあたり、まずはワイヤーフレームの制作のコツを学びましょう。
ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア
ワンポイントアドバイス
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
ワイヤーフレームとは？
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。
ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多い。逆を言えば、しっかりとしたワイヤーフレームを作成できるということは、「仕事を獲得できる力がある」という証明にもなる。お客様のご要望（相手の気持ち）をしっかり理解する事を心がけて製作してみよう。
製作のポイント
・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
マルチデバイス対応の教科書②
今日のテーマ
Box modelについて（RWD）
Box model
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
【ボックスモデルに関わるセレクタ】
☑ width ☑ padding ☑ margin ☑ border☑ height
【ボックスをレイアウトさせるセレクタ】
☑ float ☑ clear ☑ position ☑ overflow ☑ display
Viewport
このMetaタグを入れると、デバイスの画面サイズに合わせた数値で表示されるようになります。
・いまのところパターンは数えるほど
・コピペして使う事が多いのか現状
・実機検証を最後に忘れずに
Media Queries
CSSをデバイスの画面サイズ毎に内容を変えられます。
・使うコツは整理整頓
・初期値の把握
・複雑にしない
【制作作業時のコツ】
バックアップ必須！（復活の呪文を唱えられるように）
行き当たりばったり絶対ダメよ～！
UI/UX
「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。
・タッチデバイスを意識したボタン（リンク）
・迷子にさせない導線
・ページの表示スピード対策「画像」
・ページの表示スピード対策「プログラム」
・使い易さの追求
タッチデバイスを意識したボタン（リンク）
■ タッチデバイスではボタンの領域を広く取りましょう。 ～の要素タグはインライン要素になります。 その為、幅と高さを持たせる為に「 display :block;」を上手く活用してみましょう。
■ポインターが無いので、リンク箇所のデザインルールを変えてみましょう。 サイト全体でテキストリンクの箇所は「このデザイン」というルールを統一しリンクが付いていることを 解りやすくしてみましょう。
■リンクの付いたバナーデザインはより解りやすく 画像で作るバナーは、よりクリックしたら詳しい説明のページへ飛んでいくと解りやすく デザインしてみましょう。
迷子にさせない導線
■ 画面の面積が少ないデバイスでは、解りやすい導線を組みましょう。
サイト設計の段階で、無駄なリンク無駄なページは排除するのが理想です。
PCの特性、スマートフォンの特性を考えレイアウトを設計してみましょう。
■ 1クリックの動作で、1割のユーザーが離れると言われています。
無駄なページ移動はお客様が離れるだけです。スマートフォンやタブレットで縦に長いページは、
そんなにストレスを感じさせないハズなので、1ページの内容（ストーリー）を充実させましょう。
■ ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
ページを開いて最初に見えるのが「目的の内容」⇒深く読み進めて「次への誘導」
そこに興味のない方には「他の興味」へご案内出来るようにしてみましょう。
ページの表示スピード対策「画像」
■ Retinaディスプレイや４Kテレビ等々への対応
Retinaディスプレイの場合解像度が2倍になるので、2倍のサイズの画像を用意し50%のサイズで指定をして
画像は表示させましょう。ただし容量には要注意です！
■ imgとbackground-imageの違いを確認しましょう。
「img」要素はHTMLの文章構造で存在する意味が必要になります。
「background-image」は背景のCSSなので、文法上の意味はありません。上手く使い分けてみましょう。
■Webアイコンや「canvas」「SVG」を上手く取り入れましょう
「jpg,gif,png」以外の画像表示やコンテンツが実装出来る段階に入って来ているので、
上手く取り入れてみましょう。
ただし、実機検証やブラウザ依存には要注意です！
ページの表示スピード対策「プログラム」
■ 動的プログラムは表示スピードを低下させます。
JavaScriptはとても便利！…ですが、プログラムとしてはページの表示速度を低下させます。
ユーザビリティ、アクセシビリティという部分を考えて最低限の利用方法を考えてみましょう。
■ CMS等のテンプレートについて
簡単にWEBサイトを作成してくれるというツールがあったら理想的ですが、便利な分「何かしらの処理」を
行われている場合、表示スピードに影響します。良く確認をしてから利用していきましょう。
■ 誤ったプログラムも表示スピードの低下に繋がります。
HTMLやCSSの記述が誤っていてもブラウザは独自解釈して表示してくれます。
これも表示スピードの低下に影響しますし、SEO（検索エンジン対策）にもマイナスの影響がでます。
検証サイト等を利用し、正しく記述できるよう頑張りましょう！
使い易さの追求
■ WEBフォントの利用
日本語に対応したWEBフォントも多く出てきました。無料で使える「源ノ角ゴシック」「源ノ明朝」が
国内でも多く広まって来ています。上手く取り入れてみましょう。
■ jQuery の利用
HTML5やCSS3でまだ実現できない動きはまだまだあります。
ページを重くするという問題はありますが、それよりも優先すべき「使い易さの追求」なのであれば、
上手くjQueryを取り入れてみましょう。
■ Googleアナリティクスの利用
ページのアクセス数や表示スピード、滞在時間等のデータを取得出来るGoogleアナリティクスは無料で
利用することが出来ます。数字から解析しより良いコンテンツを作成しましょう。
まとめ
Webの技術は柔軟に対応しましょう。
昨今では、スマホ対応は出来て当たり前になってきました。
また様々な書き方があり、参考書や技術サイトや動画で、様々な言われ方
をしています。
まずは、仕組みの理解をして簡単でシンプルな方法で実装してみましょう。
お仕事の現場で、様々な使い方をしている場合があります。
まず、１つを理解しておけばそこから柔軟に対応していきましょう。
郷に入っては郷に従えです。
情報や流行りや時代背景を考えると、コーダーのお仕事で、いまデザイ
ナーに求められるのは、「柔軟性」です。
学科 CSS基礎⑤
Webページ運用・作成の困った問題