学科ユーザーインターフェイス基礎③
今日のテーマ
コーディングの準備をしよう
デザインラフとは？
ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。
one point
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。
デザインラフとは？
コーディング（HTMLとCSS）を知らない人に見せるもの
HTMLとCSSでコーディングした時と同じ見た目のモノを作成しましょう。
実際のWebサイトにするのには、HTMLとCSSでコーディングをする必要がありますが、クライアント（発注者）さまに、こんな感じのデザインにしましょうか？ こんな感じではいかがですか？ という感じで、完成のイメージを画像で作成するのが、「デザインラフ」の役割。
逆に「コーディング（HTML・CSSにする）」については、デザインラフをクライアント（発注者）さまに見せて、OKを頂いたら行う作業になります。
要するに完成イメージをしっかりとクライアント（発注者）さまと共有して、 「コーディング（HTML・CSSにする）」 は、「デザインラフ」の見た目をそのまま形にする作業になります。
one point
やるべきことは、バナーの時と同じです。
まずは「レイアウト」をしっかりと考える。
ただしこれはワイヤーフレームの段階でしっかりと行っていれば時短になります。
次に「文字」をどうするか？を考えましょう。
Webサイトなので、何処を画像にするのか？どこをテキストにするのか？をしっかりと考えてデザインをまとめましょう。最後に「配色」です。
色をどう使うかで、大きくイメージが変わってしまいますのでしっかりと考えてまとめていきましょう。
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
コーディングに向けての注意点①
注意点① 画面サイズはどうする？
昨今のWebサイトの横幅はニュートラルです。
様々なデバイス（スマホ・タブレット）に対応する必要がありますが、まずはPCを基準に考えてみましょう。
出荷台数、また基準とされるもPCのモニターサイズの多くは「１３６６ｐｘ」が現在は多いです。
そこで、特に理由がなければ「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難でしょう。
ちなみに、現時点でのＥＣサイトの楽天市場やヤフーショッピング店の推奨サイズが「９６０ｐｘ～９８０ｐｘ」になります。
注意点② 見出し（ｈ１～ｈ６）をどうするのかを意識する
Webページのデザインにおいて重要なのがHTMLの文法です。
見出し（ｈ１～ｈ６）の使い方とルールをしっかり確認しておきましょう。
まずページの最初にｈ１（ページ全体の見出し）が必要になります。
ＨＴＭＬ５の文法上では、セクショニングタグ毎に複数ｈ１を設けることが出来ますが、１ページにｈ１は一つがＳＥＯ的にも解り易いかと思います。
それに続く、ｈ２やｈ３の構成も大見出し（ｈ１）に対して小見出し（ｈ２以下）という順序と内容をしっかりと意識して作成してみましょう。
注意点③ 見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
見出し（ｈ１～ｈ６）があったら必ず、その内容が必要になります。
見出しの次に段落（ｐ）やリスト（ul li ol li）などの内容を入れていきましょう。
制作のコツとして、文法構造に不安な時はタグチェッカーなどを利用してみるのが一番早いです。
検索して読んだり、書籍を調べるのも大事ですが、作ってみるのが一番手っ取り早いですので、効率よく進めてみましょう。
ちなみに、悩んだらpタグ（段落）として考えておけば間違いは無いです。
注意点④ 画像（img）リンク（a）や強調（strong,em）などの構成
それぞれの見出し（ｈ１～ｈ６）、段落（ｐ）やリスト（ul li ol li）の入れ子（インライン要素）として、画像（img）やリンク（a）、強調（strong,em）などのタグをイメージしてデザインを整えておきましょう。
入れ子構造（インライン要素）の文法については、HTML５では少しややこしいところがありますが、考え方として上記の②③の内側に、画像（img）やリンク（a）、強調（strong,em）などをマークアップするものと考えておくと間違いは無いでしょう。
コーディングに向けての注意点②
注意点① どこを画像にするのかテキストにするのか？
Webページのデザインから、コーディングで最も悩まされるのが、どこを画像にするのか？何処をテキストにするのか？です。
画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして、有効です。
CSSで実現可能なデザインであれば、積極的にCSSで表現してみましょう。
ただし、デザイン重視で表現しなければならない場合もあるでしょう。そんな時は画像にしても間違いではありません。
注意点② 画像文字にするのかテキストにするのか？
例えば、ロゴの部分の文字はデバイス環境によってフォントが変化しては都合が悪い場合があります。そんな時に
は、画像文字としてデザインすると良いでしょう。
注意点③ HTMLなら「img」CSSなら「background」
コーディング（HTML・CSS）を意識して考えるときの最も重要な注意点として
「img」はHTMLなので、文法として意味が必要になります。逆に「background」ならCSSで文法としての意味は必要無いと考えましょう。
何処を、「img」にするのか、何処を「background」にするのかをよく考えて「デザインラフ」を作成してみましょう。
注意点④ テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなります。
画像は単純に重たいです。SEO（検索エンジン上位表示）の対策として、ページが表示されにくいのは避けたいです。
実際に、サイトの表示スピードは検索順位への評価にも影響するとgoogleも正式に公表しています。
Webサイトの制作のポイントは、出来るだけ画像部分を減らしてテキストで構成するのが理想です。
コーディングに向けての注意点③
注意点① 配色はデザインラフですべて決定しましょう。
デザインラフでは、最終的なデザインの仕上がりをクライアント（発注者）さまと共有するわけですので、コーディングの作業時に色を考えることは無いで
す。デザインラフの段階で、配色は全て決定し、万が一コーディングの時に行うのは応急処置程度の話だと思って準備をしていきましょう。
注意点② 16進数のカラーの表記なのかRGB表記なのかを統一しておきましょう。
①にあるように、コーディングで色を考えることはありません。また正確な16進数のカラー「例： #ｆｆ００００」なのかＲＧＢ「例： rgb(255,0,0) 」のコード
を控えておきましょう。コーディングの時は、出来上がったデザインから「スポイトツール」で正確なカラーコードを使いましょう。
注意点③ 透過表現は、RGBAか、PNG画像の利用か決定しておきましょう。
透過表現は、CSSで「 例：rgba(255,0,0,0.7) 」という記載方法が使えます。また画像そのものを透過表現する方法として、PNG画像を利用する方
法があります。どちらをどの様に使うかもしっかりとイメージして準備をしておきましょう。
クライアント（発注者）さまへは複数提案を出して選択肢を用意しましょう。
「デザインラフ」は必ず２提案以上作るのが制作のポイントです。そもそもクライアント（発注者）さまの頭の中のイメージを具現化するお仕事
です。１つのデザインでストライクを取るのは至難の技です。最初はまず提案です。複数の提案を用意して目的に寄せていく、理想に近づける
のが、デザイナーの役割です。バナーなどの作品と同じように複数の提案を「レイアウト」「文字」「配色」を変えて作成してみましょう。
「配色」には必ず意味と目的を
配色には意味が必要になります。適当に配色を決めることなどありません。例えば下記の「赤・青・黄」の3色は生活の
中で良くある色ですね。「赤は止まれ」「青は進め」「黄色は注意」の信号機です。
配色デザインを考えるとき必ず意味と目的を考えて配色を考えていきましょう。