前回の記事に続き、ウェブデザイン編です！
普段何気なく見ているヘッダーやフッター、ボタンなどもデザイナーさんによってしっかりと作られているもの…。
特にコーディングを別の方が担当する場合、おや…？と思われてしまうデザインだと確認の手間などが発生してしまいます…。
そこで、今回はあしらいだけでなく、コーディングをする時に注意すべきポイントも踏まえてデザインをクオリティアップしていきましょう！
目次
まずはヘッダーのデザインをしっかり見ていきましょう
ウェブサイトで必ずといっていいほどヘッダーのデザインは取り入れられるデザインの一つです。
今回はまずヘッダーのデザインをクオリティアップしていきましょう。
ベーシックに使われる会社のロゴ、リンクといった必須要素を追加してみました。
デザインを確認してみましょう。
必要な要素はありますが…リンク同士の間隔がばらばらとしております。
また、お問い合わせは目立たせたいものの、他のリンクと同じであるため目立ちません。
それでは調整していきましょう。
余白はしっかりと揃えました。
また、ボタンとしてお問い合わせを別デザインで作成しました。
特に「お問い合わせ」や「リクルート」（採用関連）や「電話番号」などは、ユーザーに見て頂きたい要素であるので、他のリンクとは色を変える・ボタンにするなど特に目立つような見た目にしておくと良いでしょう。
ヘッダーはデザインによっては追従する場合もあるため、デザインのずれはとても目につきやすいです。
また、「お問い合わせ」や「リクルート」（採用関連）や「電話番号」など、目立たせたい要素を取り入れるのもベストです。
デザインがずれていないか、しっかり確認しておきましょう。
ぱんくずリスト、小さいけれどこだわっていきましょう
下層ページにはよく取り入れられるぱんくずリスト、次はこちらをクオリティアップしていきます。
まずはこちらのデザインを見てください。
何の要素で作られているか分かりますでしょうか？
答えは「文字ツール」です。
そのまま、「TOP ＞ 制作実績 ＞ 制作物ABCについて」と入力しています。
しかしこちらのデザインのままだと、クオリティが低く見えます。
特にアローのデザインとしてテキストの記号「＞」をベタ打ちで使うのは避けた方が良いでしょう。
ブラウザで環境ごとに表示されるフォントが変わってしまう場合など、見た目が変わってしまいますし、見た目も美しくありません。
そのため、このようにシェイプでアローをしっかりと作りましょう。
文字入力のみの場合は簡単にテキストを調整出来ますが、より良いデザインのためにもここはしっかりと毎ページぱんくずリストのデザインを調整する前提で作っていきましょう。
リンクの多いフッター…なんだか見辛く分かりにくい…
リンクを5項目に分け、整列し並べてみましたが…。
ちょっとごちゃごちゃとしていて分かりにくいですね。
また、親ページと子ページに分かれているのですが…それもこのデザインだとよく分かりませんね。
そのため、まずはリンクの並び方について整理していきましょう。
今回はこのようなページ分けです、「濃いオレンジ」・「赤」・「灰色」が独立した親ページです。
子ページは「薄いオレンジ」としています。
また、「赤」は重要度の高い「お問い合わせ」や「採用情報」としています。
「灰色」はコピーライトといった必須要素ではあるものの目立たせる必要のないもの、メインコンテンツではない「プライバシーポリシー」や「運営会社（リンク一覧系ページ）」などの重要度の低いリンクとなります。
それらを踏まえてデザインを調整してみました。
beforeと比較し、各要素の重要度がはっきりしているのではないでしょうか。
お問い合わせ・採用情報（赤の重要な要素）
「お問い合わせ」や「採用情報」はボタンとして目立つように配置。
親・子ページのリンク（濃い・薄いオレンジ）
子ページもしっかりと「制作実績」の中の子ページ3つ、「会社概要」の中の子ページ3つ、という階層分けがぱっと見で伝わるようになりました。
コピーライト・重要度低のリンク（灰色）
「プライバシーポリシー」や「運営会社」の重要度の低いページは他の主要ページとはレベル感を低くし、コピーライトと一緒にまとめてスッキリと見せました。
フッターはヘッダーに比べ目につきづらく地味な要素であるため、普段フッターデザインをしっかり見る…という習慣がある方は少ないかもしれません。
フッターはヘッダーよりも表記するリンク数が多くなることも多いため、ゴチャゴチャとしてしまいがち。
そのため咄嗟に作るとなるとデザインの引き出しも少なく苦労しがちです…。
特に下層ページ、子ページ、アンカーリンクなどが多いサイトであれば特に悩むことになるでしょう。
レベル感を意識して作る練習にもなりますので是非丁寧に調整してみて下さいね。
ホバーのデザイン、作ってますか？
ホバーする要素がある場合、皆さんはホバーのデザイン、作っていますでしょうか？
デザインを作成する場合、その要素をホバーする想定であればホバー時デザインも併せて作成しておきましょう。
ホバーデザインが無い場合はコーダーさんが適宜作ってくれるかもしれません。
しかし、なるべくホバー時のデザインもデザイナー側で先に用意しておくのがベターです。
このように、レイヤーに色を付けておくととても分かりやすいです。
また、レイヤー名も「●●:hover」などの分かりやすい名称にリネームしておくと良いでしょう。
ボタンの余白…どうやってルール付けしてる？
サイトを作る場合、ボタンのデザインはほぼ入ってくるでしょう。
今回は「詳しく見る」のボタンを基準のサイズとして、「製作一覧はこちら」のボタンを作成致しました。
…が、「製作一覧はこちら」のボタンは文章が多く同じサイズだとギリギリになってしまいました。
要素を詰め、右向きアロー（>記号）の位置も基準のボタンとは違う位置に置く事でなんとか収まりましたが、あまり綺麗ではありませんね…。
今回のデザインのようなベーシックなボタンを作る際は、ボタンサイズを基準に作る場合でも、下図赤枠のように左右に余白（コーディングではpadding）を持った状態で考えると良いと思います。
どこかのボタンサイズを基準にデザインを展開する場合、ボタンの中のテキストがボタンサイズより長い場合も考えられているか、一度確認してみると良いでしょう。
上記をふまえて「製作一覧はこちら」のボタンに余白を付けてみました。beforeのような窮屈さもなくなりましたね！
デザイン上、美しく見せるために意図して一部基準となるルールを変えるのはアリだと思いますが、このように位置を細かく変えて調整することは汎用的に使われるボタンなどでは避けた方が良いでしょう。
そのため、可能な限り「何が入っても問題ない作り」になるように元から作るのがベターです。
その写真、ぼやけていませんか？
初心者デザイナーさんあるあるかもしれません。
こちらのデザインをよくよく見てみて下さい、先程のafterと少しだけ違う部分があります…。
お気付きでしょうか。
中央の3カラムの灰色の部分ですがエッジが滲んでしまっています…。
何故滲んでしまうのか…それは「属性」タブのシェイプのサイズや位置に小数点が混ざってしまっているせいです。
また、移動ツールで丸ごと選択し、拡大縮小をしてしまうと「位置」、「シェイプ」のサイズ共に端数が出てしまうので、少し調整に手間が掛かります。
なるべくシェイプの比率を固定し自分で計算して調整した方が良いでしょう。
特にこのシェイプの上に画像をクリッピングマスクで配置する場合、エッジが滲んだ画像になってしまいます。
写真を扱う際はスライスが絡むので特に気を付けましょう。
最初は気付きにくいかもしれませんが、100％原寸ビューで作業していると比較的気付きやすいです。
ぼやけているように見えたら積極的に「属性」タブを見直していきましょう！
字下げで全角スペースを入れてない？
字下げのデザインは注釈などでよく使う事でしょう。
また、「・」などの見出しも同じように2行目以降字下げの設定をする場合が多いと思います。
このデザインの場合皆さんはどのように調整しますか？
今回は全角スペースを入れて字下げをしてみましたが、テキストに修正が入ってしまいました。
テキストの文字数がずれたことにより全角スペースの位置がずれてしまいましたね。
このように全角スペースを入れて調整していくと手間になる事が多いです。
また、コーディングの際にテキストをコピペすると無駄な全角スペースが入ることになってしまいます。
そのため、字下げの設定で対応した方が便利です。
字下げの設定は「段落」タブから設定可能です。
ここで字下げの設定をしておくと、文字数が変わっても自動的に調整してくれます。
便利ですね！
ちょっと番外編一見同じデザインだけど…
丸切り抜きデザインをもっとスライスしやすく！
最後はちょっと番外編…としてご紹介させていただきます。
このような丸いシェイプでクリッピングするデザインはスタッフの紹介などでよく使われる印象です。
今回は例で2通りのデザインを作成しました。
何が違うかわかりますでしょうか…？
意地の悪い質問ですが、見た目では分かりませんが使われているシェイプの種類が違います。
左側は「長方形ツール」、右側は「楕円形ツール」です。
長方形ツールでは半径分の角丸サイズを指定し、正円を作成しています。
このようにデザインで正円で画像をクリッピングする場合、個人的には「長方形ツール」の方をオススメしています。
なぜなら「長方形ツール」の場合、角丸を0pxに指定すればすぐに正方形のデザインになるためです。
どうして正方形のデザインが必要なのか…？と思われる方もいらっしゃるかもしれません。
WEBデザインでは、デザインを作った後でコーディングをする前にスライスという作業を行います。
こういったデザインの場合、透過pngで正円を切り出すのではなく、jpgデータで正方形を切り出し、コーディング（CSS）にて角丸を付ける方がデータとしては軽くなるためWEBサイトでも取り扱いやすくなります。
そのため角丸の設定を解除するだけで正円から正方形に戻せる長方形ツールは、スライス面で楕円形ツールよりも取り回しがしやすく思います。
ちなみに角丸はシェイプのサイズより大きいサイズ（例：100px*100pxのシェイプに対し角丸999pxなど）を設定すると、自動的に半径のサイズを入力してくれます。
ウェブデザインでデザインを見直す時に特に気を付けるべき点まとめ
入れる文字が長くなった場合、そのデザインでも通用するのか？
スライスで書き出しやすいレイヤー構成になっているか？
紙やバナーなどのコンテンツとは違い、使いまわす要素が特に多いためできる限りルール化しておく
ウェブデザインを製作する際は、見た目だけでなくコーダーさんがコーディングしやすいような作りになっているとなお良いでしょう。
ブラッシュアップの際に、レイヤー構造が分かりやすいか…？コーディングしやすいか…？等も念頭に置きながら作業できるようになると良いですね…！
