10月の初めごろに、プロのWebデザイナーの先生に自分の制作物を見て色々教えてもらう機会がありました。
その時勉強したことのメモを改めてまとめてみようと思います！
デザインについてはほぼ素人として教わりに行ったので、主業務でデザインをされている方には当たり前のことが多いと思われます。
サイトの目的をハッキリしよう
要するに「どんな結果に結びつけるために作ったサイト」なのかをハッキリさせ、
そこからレイアウトや演出を考えようということだと思います。
より具体的に言うと「いかにコンバージョン率を高めるかを考えてデザインする」というですね。
コンバージョンとは
WEBサイトでの宣伝効果で最終的に得られる結果(利益)のこと。
ネットショッピングサイトなら商品の購入、有料配信サイトなら会員登録、コーポレートサイトなら商品やサービスに関する問い合わせと、サイトの目的によって異なる。
私の制作物への反映：
私の場合作っていたのがコーポレートサイトだったので、一番重要なのは「問い合わせしやすいデザインにする」という点で、そのために
「問い合わせリンクボタンが常に画面内に表示されるようにする。」
という改善を提案してもらいました。
それを受けて、
PC画面：グローバルナビに入っているので、グローバルナビを画面上部に固定表示
モバイル画面：ハンバーガーの中に入ってしまっていたので
お問合わせボタンだけ単独で常に画面の一番下に表示。
といったデザインに変更しました。
ビューポートで完成するようにデザインする
開いた時の画面に必要なものが欠けていると、その時点でサイト内容に強い関心がない限り閲覧者が離脱してしまう可能性が高い。
ブラウザの表示域＝ビューポートを意識して、どのデバイスやブラウザ幅で見てもその点が破綻しないように注意しましょう。
具体的には下記の要素を満たすようにデザインします。
ファーストビューに必須の要素
- グローバルナビ(ハンバーガーアイコンでも可)
- ヒーローヘッダー(全表示域に広がる画像ヘッダー)の場合は下にコンテンツが続いていることを示す要素
望ましくない要素
- ヘッダー画像の下に中途半端に見切れたコンテンツ
それと、ビューポートを意識してレイアウトをするに当たってheight:100%指定が必須というお話でした。
要素をビューポートの高さに対して指定する方法
html,body両方の要素セレクタにheight:100%を指定すればOK。
なんとなくコンテンツすべての高さになってしまいそうですが、
これでビューポートのレスポンシブな高さが取得できます。
後はビューポートの高さに応じて幅を指定したい要素の高さも％で指定出来るようになります。
ちなみに2つの要素に指定するのは、ブラウザによってどっちからビューポートを取得するかが違うかららしいです。
私の制作物への反映：
作成中のサイトはヘッダー画像にとりあえずwidth:100%を指定していたのですが、これだと画面幅と一緒に画像の縦幅も無制限に増えてしまうため、下のコンテンツが中途半端に見切れてしまう場合がありました。
教わった点を踏まえると
「ヒーローヘッダーにしてファーストビューを画像でいっぱいにする」
「縦幅をある程度固定して下のコンテンツが見切れないようにする」
のどちらかでファーストビューのレイアウトをコントロールするべきだと思われます。
今回の場合、ヘッダーの画像の質があまり高くなく、画面いっぱいの拡大に耐えないと
判断して2つ目の方法にしました。
また、ヘッダーdiv内にimgタグでヘッダー画像を指定していたのをbackground-image
での指定に変更することで、background-sizeを使って画面幅の変化に柔軟に対応できる
ようになりました。
参考：CSSのbackground-sizeで背景画像をレスポンシブ対応する方法
色は波長で出来ている
「色」というものは光が物体に反射した際の波長の違いを脳が感じ取るもので、調和したり相性の悪い組み合わせには科学的な法則性がある…みたいなお話でした。
具体的には、下記の様な一つメインカラーを決めれば自動でそれにマッチする色を算出してくれるカラーサンプルサイトを活用しようということです。
Adobe Color CC
ベースカラーを指定して「colorハーモニーの変更」を選択することで、類似色やトライアドといった調和しやすい法則別にカラーサンプルを取得できます。
HUE/360
色相環の中で使いたい色相をクリックすると、それに調和する色だけが残ります。
ベースカラーをカラーコードで指定することは出来ませんが、下記の様なWEBデザイン向けにとても便利な機能があります。
①色を何色か選ぶと画面の一番下にその色の帯が出現します。
②まず「Print user color」で選択した色のカラーコードが分かります。
③「Try Painting」をクリックするとデモサイトに移動します。
④ここでヘッダー部分をクリックすると操作パネルが現れて、先ほど選択した色をヘッダーや本文の文字色・背景に適用した際の雰囲気をテストすることが出来るのです。
私の制作物への反映：
作っているサイトのロゴが青・黄色・赤・緑を使ったカラフルなものだったのですが、白抜きしつつそのヘッダー背景をメインカラーの青にしていました。
それに対して「複数色使うロゴの背景はモノトーンにした方が画面がまとまる」というアドバイスをもらい、思い切って真っ白に変更したところ、依頼者にも垢抜けたと好評でした。
ゲシュタルトの法則
デザインのごく基本的な守るべき7つの法則です。
無意識レベルでの認識能力の傾向を法則化したものなので、自然に取り入れている人も多いと思われます。
しかし明文化して意識することでデザインの素人っぽさをグッと減らすことが出来ます。
***
- 近接の法則…近接した要素同士は同じグループとして認識される
- 類似の法則…同種の要素は一つのグループとして認識される
- 閉合の法則…複数の図形の集まりを見ると、全体で一つの図形だと認識し欠落を脳で補完する
- 連続の法則…同じライン上にある要素は１つの塊として認識される
- 共通運命の法則…同じ方向や法則で動く複数の要素は関連性で紐づけられる
- 面積の法則…2つの要素が重なっている場合、面積の小さい方が強調される
- 対称の法則…左右対称の図形は注視されやすい
***
なぜ、ゲシュタルトの法則はデザインに活用されているのか？
詳しい内容は上記のようなサイトを見てもらうのが早いと思います。
ゲシュタルト法則は人間の自然な認知機能の働き方を法則化しているので、逆に言えばこれに逆らうことはユーザーに余計な認知コストを掛けるということです。
画面の華やかさ以前の、使い易さの部分を「デザイン」するために常に意識しましょう。
また紙面でのデザインは限られたスペースでの配置が重要なのに対し、web媒体の場合スクロールが面倒になるレベルでなければ、コンテンツの縦幅が長くなることはそこまで忌避しなくて大丈夫です。
なのでコンテンツの配置の際に違うグループ同士は余白を多めに取ることが、見やすいサイトを作るポイントです。
私の制作物への反映：
中身の関係で中途半端な中央寄せ(中心軸が少し右にズレていた)になっていたヘッダーとグローバルナビをデザイン変更して完全にセンタリングした。(対称の法則)
下にあるアーカイブボタンとの距離と、ニューストピック同士の距離が同じくらいになっていたので、トピック同士を近づけた。(近接の法則)
ちょっと話ズレますが、対称な図形が強く認識されて、意味などを想像する思考に流れやすいのは多分「人間の身体(特に顔)が左右対称だから」だと思います。
よくトーストの焦げがキリストに見える…とか心霊写真だと思ったら木の節だった的な話を引き起こすのと同じ、人間っぽい造形に対して情報感度がずば抜けて高まる人の認識能力特性の延長ですね。
Retinaディスプレイの仕組み
webデザイナーがモバイル用のコンテンツを作る時に必須の知識が、「ppi」と「Retinaディスプレイ」の関係性です。
ザックリとした理解で書いているので結論以外はちょっと自信ないです。。
まずppiとは「pixel per inch」の略称で、つまり「1インチに何ピクセルが入っているか」を表す解像度の単位です。
これが高ければ高いほど、(※大きい画像が用意されていれば)画素数の細かい綺麗な画像が表示され、スマホでピンチして拡大しても綺麗なままというわけです。多分このppiの数値はどのデバイスのディスプレイでもどんどこ上がってるので具体的な数値はあげませんが、大切なのはRetinaディスプレイがタブレット端末のスタンダードになったことで必要な素材の大きさもどんどこ上がっているということです。
ではRetinaディスプレイとはなんぞやというところですが、解像度の観点から言うとppiがPC画面の3倍くらいあるめっちゃ高解像度のディスプレイです。これがPCで表示されるサイトと色々な相違を生みます。
例えばPC用サイトにMAX2000px幅で綺麗に表示されるトップ画像が必要なのは分かりやすいですが、かと言ってモバイルサイトの画面幅が600pxだからと単純に600pxのモバイル用トップ画像を用意すればいいというわけではないということです。
ppiが三倍あるのだから、画面600px×3倍＝1800pxの画像を用意しないと拡大した際に粗が出てしまうのです。
要するにRetina採用ディスプレイに対応するにはPC用並みのサイズの素材を用意しなければならないということです！
それとレスポンシブサイトを作る時のTIPSとして、文字サイズ他の単位はremを使うのが良いと教わりました。
要素ごとのfont-sizeのpx指定はブラウザでの文字サイズ変更設定が効かなかったりするので、その意味でも避けた方が良いみたいですが、
デバイス幅によってメディアクエリでhtmlセレクタのフォントサイズを変えている時に文字以外、要素のマージンやパディングもremで指定する方が色々手間が省けました。
もちろん個別に指定する必要があるところもありますが、一括していい感じにレスポンシブな要素間の隙間調整ができます。
以上です！
なんとなく分かってることでも改めてポイントを知ってチェックしてみると甘いところが沢山あって勉強になりました！
特にビューポイントで完成させるというポイントは自分でも修正して見てすごく大事なところだなと実感しました。
コーディングをメインに勉強していますが、デザインもコーディングも相互に影響し合って良いものを早く作れるようになると思うので、デザインの勉強も適時進めていきたいですね。(今はノンデザイナーズ・デザインブック読んでます。)