Chitose Kato’s デザイン解剖 VOL.6「株式会社池田模範堂 採用サイト」
雑誌『Web Designing』の連載「MISH MASH」で紹介している「洗練された デザインのつくり方」。初心者から一歩踏み出したデザインのポイントをお届けしているこちらの内容を、最近気になった素敵なサイトとあわせて深堀りし、加藤千歳さんが独自の視点で解説（解剖）します。
話してくれた人
加藤 千歳さん
山梨県甲府のWeb制作会社、株式会社BISCOM代表取締役。独学でWeb制作をはじめ、フリーランスのWebデザイナーを経て、2016年にBISCOMを設立。現在はWeb制作のみならず、印刷物やロゴ作成、Webコンサルティングやブランディング、企業の総合的なサポートを行っている。CSS Niteに地方版（甲府）代表として関わり、山梨ウェブ研究会も発足。
今回のWebサイトの概要
「株式会社池田模範堂 採用サイト」
制作会社：株式会社ジーピーオンライン
夏場によくお世話になる、かゆみ止め薬「ムヒ」でおなじみの製薬企業・池田模範堂の採用サイトです。赤色の配色と存在感のあるフォントが印象的なページを、さっそく見ていきましょう。
なお、今回は『Web Designing』8月号の連載（MISH MASH）で解説した「2つの“設計力”で変わるデザイン」の視覚設計が実際にどのように使われているのかを、同サイトを例にご紹介します。ぜひ本誌とあわせてご覧ください。
シンプルな中にも工夫が見えるメインビジュアル～リード部分
①ブランドロゴと合わせた赤色が、このサイトのメインカラーになっています。
②右端のボタンはベタ塗りで重さがありますが、中央の枠には透け感があるため、ヘッダーが重たい印象にはなりません。
③周辺の赤色の配色を引き締める黒のボタン。ヘッダーに並んでいる枠はほぼ同じ高さですが、ENTRYボタン（CV）は、より目立つ配色と大きさになっています。
④メインコピーには、ロゴの書体①（太い／平体）に負けない、似たスタイルのフォント「デラゴシック」が使われています。存在感のある平体風のフォントで、Adobe FontsやGoogle Fontsで入手可能です。
⑤サイト内の写真はすべて、わずかに角丸が施されています。丸すぎず、かといって角ばったままでもないため、フォントの雰囲気ともよくマッチしています。
⑥大小・縦横のイメージカットは、少しフリーな配置に。テキストの配置もやや右寄りで、整列しすぎていないため視線が自然に流れ、読み進めやすくなっています。さらに、写真の色味には背景色となじむような赤みが加えられており、イメージカットだけが浮きすぎることなく、背景と調和しています（セクション内に一体感があるデザイン）。
視線誘導と見た目の配慮
⑦ブラウザ幅いっぱいに横に並んだイメージカット（横スクロール）は、上部コンテンツとの切り替え（仕切り）の役割も果たしています。写真の色味はデフォルトのままで、ここに赤みを加えてしまうと、全体が野暮ったく見えてしまうため、あえて手を加えていません。
⑧英字フォントには「Montserrat」が使われています。こちらもロゴや日本語フォントと相性の良い、丸みのあるスタイル（太い／平体）で、Adobe FontsやGoogle Fontsから入手可能です。
⑨縦横の配置がきれいに揃えられた見出しまわり。縦書きテキストの左右の余白が均一に整えられているのもポイントです。視線が自然に流れる「Fの法則」にも合致しており、読みやすさが意識されています。
⑩ブランドロゴが大きく写った外観写真により、「何の会社か」がひと目で分かるレイアウトになっています。
⑪対比的な写真を配置することで、歴史ある企業であることが視覚的に伝わります。
⑫矢印ボタンも、リンクであることが一目で分かるデザインになっています。写真と同様に、角に若干の丸みがあるため、見た目にも統一感がありバラつきません。
⑬テキスト部分には、背景色やフォントとマッチする「帯（座布団）」を敷いたあしらいが施されています。
（※図版上の「A」については後述）
「そろえる」と「ずらす」の好バランス
⑭⑨と同様に、見出しとサブテキストの配置がきれいに揃えられています。
⑮写真の配置を少し上下にずらすことで、整列しすぎないレイアウトになっています（適度な変化）。写真は手元をメインにしたカットで統一され、人物の配置も同じ高さに揃えられており、それぞれの職種イメージがわかりやすく伝わる構成です。
⑯こちらは、抜け感のあるリンクボタンが使われており、セクションの背景とも自然になじんでいます。
⑰白いテキストが読みやすいように、写真の下部には黒いグラデーションがかけられています。
⑱黒の透過がかかった画像により、⑰と統一感のあるデザインになっています。
⑲セクションの切り替え部分には、両サイドにわずかな角丸が施されており、細部まで「角丸のあしらい」が徹底されています。
⑳英字の配色は、背景からほんの少しだけ色を変えることで読みやすさを確保。背景にはグランジ風のテクスチャもかけられており、ベタ塗りでも重くなりすぎない工夫が施されています。
㉑センター以外の写真に赤みをかけることで、自然と中央の情報に視線が集まる構成になっています。
㉒こちらも、リンクボタンが見やすくなるように、写真の下部に黒いグラデーションが加えられています。
㉓カーブに沿った配置で、レイアウトに変化がつけられています（見た目が単調にならない）。
㉔アールの下に収まりよいサイズで配置されたバナー。
最後までコンセプトがブレない
㉕ページ上部から3ヵ所にある「A」の細い余白。この余白は幅が統一されており、サイト全体が整然とまとめられている印象を与えます。細い余白があることで、シャープな抜け感の演出にもつながっています。
㉖横幅いっぱいに広げたセクションは、シンプルに見せることで一度全体のデザインをクールダウン。周りのあしらいが控えめな分、中央のコンテンツに自然と注目が集まる流れになります（右下には固定ボタンも配置）。
㉗打ち出すメッセージを改めて入れることで、最後までサイト全体のコンセプトがブレない強さを感じます。
㉘CVへの誘導となるリンク。写真は2枚とも、リンクの矢印が進む方向を向いており、自然な流れで誘導されています。
㉙ワンポイントのあしらいでブランド感をアップ！（遊び心も◎）
㉚背景がグラデーションでオレンジに変化しており、他のセクションと異なることで「終わり」が明確にわかる構成です。
工夫された視覚設計で、内容に集中できるデザインに
一見シンプルに見えるデザインの中には、見る人に違和感を与えず、内容に集中させるための視覚設計の細やかな工夫が随所に散りばめられていました。皆さんも、ぜひ実際のサイトでチェックしてみてくださいね。
《過去分はコチラ！》
Vol.1 千葉県旭市観光サイト「今日も、ぶらり、あさひ日和。」