山田 小百合

人材コンサル会社のコーポレートサイト（架空）を作成しました。 【制作期間】 ・3週間（情報収集・デザイン：2週間、修正：1週間） 【使用技術】 ・Figma ●サイトについて ・フリーランスの活用をコンサルする「東フリコンサル」 ・ITに疎い企業さんを相手にフリーランスのエンジニアやデザイナーさんを紹介、活用支援を行なっている会社。 【目的】 IT事業を始めたいので、Webでの集客を強めたい 【ペルソナ】 設立から5年以上経っている営業会社、人材会社、IT事業を始めようと思っている企業。 40代以上の男性で、ITは全くわからないためコンサル会社を職場のパソコンから探している。 【いつ？】 IT事業を始めることが決定した時 【どこから、どのように】 職場のパソコンで検索エンジンから（Google、Yahoo!） 【モチーフ】 “歴史あるコンサル会社”を感じさせる、きっちりした雰囲気のサイトが欲しい 【サイトに求めること】 web場での集客を強めたいのが今回の目的。アニメーションなどは必要なく、ミニマムの物であれば良い 【カラー】 ベース・メイン・アクセント：#1D243E、#EAB05C、#FFFFFF 文字・アイコン：#333333、#DC2D2D ・メインカラーは、信頼・堅実・会社のイメージに合うよう青ベースであるネイビーを採用。 　ターゲット年齢が40代であるため、トーンの落ち着いた色を使用している。 ・アクセントカラーは、CTAボタンを強調させるため反対色を採用。 　PALETTABLE（パレッドブル）を使用して、相性の良いカラーを確認した。 ・文字色は、可読性を高めるために#000ではなく#333を採用。 　ベースカラーの#FFFの上にあっても、目が疲れないよう配慮した。 【フォント】 平仮名・漢字：Noto Serif JP ▶︎イメージの「歴史あるコンサル会社を感じさせるきっちりした雰囲気のサイトが欲しい」を表現できるよう、きっちりした雰囲気かつ信頼感の強まる明朝体を採用。 アルファベット：Noto Sans ▶「ミニマムの物であれば良い」という要望と、今回のイメージからシンプルで馴染みがあるため採用。 【メインビジュアル】 ・「課題解決に向けて、一緒にがんばりましょう！」というイメージで、ビジネスマン同士が握手しているものを採用。 【余白のルール】 ・セクション間：100px ・セクション内：60px 【デザインのポイント】 ・「フォントサイズ」「余白のバランス」の２点をより意識して作成。コンテンツ間の余白を統一させて、サイトの法則を作った。 ・「歴史あるコンサル会社を感じさせるきっちりした雰囲気のサイトが欲しい」というイメージから、あしらいは最小限できっちり感を出し、すっきりとした印象にした。 ・ターゲットが『40代以上の男性、ITは全く分からない』のため、わかりやすくシンプルな構成に。男性に好まれるよう分かりやすい写真、フォントも慣れ親しんでいるものを採用。 ・『Web場での集客を強める』という目的であるためコンバージョン率を高めることができるよう、フッター部分にもCTAボタンを設置。 ・視線誘導のため、センターラインをアクセントに入れている。 ● 学んだこと・頂いたアドバイス ・平仮名、アルファベットのフォントが混在した際の印象を考える。（並列して使用する際、近い印象のものを組み合わせる） ・コンテンツとコンテンツの間の余白は、ルールの統一がされていると良い。 ・見出しの文字のウエイト・サイズ、本文の文字サイズのバリエーションを整理して、なるべくバリエーションの種類が増えすぎないようにする。 ・お問い合わせ完了後に行き先がなくなってしまわぬよう、トップに戻るなどのリンクをつけてあげると親切。 ・下層ページが多くあるため、コンポーネント活用の重要性。 ●作成をしてみた感想 　下層ページのあるサイトを作成し、デザインのやりがいをより一層感じました。ページ数が多い場合、時間短縮・作業効率向上のためにコンポーネント化をする重要性を知ることができ、今後も活用していきます。 　今回ページ数が多い分、いつも以上に"余白のルール"を徹底して、全体を見た時にまとまった印象になるよう気をつけています。ルールを統一することでクオリティが向上しコーディングもしやすいとお聞きしたので、大切なスキルだと気づくことができました。