参考サイト考察 ー長野県建設技術センターー
【テーマ】
・モダンなデザイン
・大胆な余白
・2カラー（青、緑）
・直線のみで構成されている。
【事業内容】
長野県建設技術センターは、長野県内の地方公共団体が施行する建設事業等の社会資本整備に係わる技術支援事業を行い、もって地域の振興発展及び公共の福祉の向上に寄与することを目的とした団体です。
①技術研修等の取り組みの告知
②入札情報の開示
③材料試験等の申込の受付
④求人
の4点がサイトの主な役割。
【Responsive】
対応（ブレイクポイント:1,040px)
【color】
ベースカラー（background)：#f2f57 (トップイメージ背景のみ#f3f57のさりげないグラデーションを使用）
キーカラー （緑）：#37b64b
キーカラー （青）：#023166
【font-family】
ロゴ、本文：Noto sans JP
等幅フォントのNoto sans JPが用いられており整然とした印象を付けている。また少し字間の広いフォントであるため抜け間のある印象を与えている。
キャッチコピー：A1 Mincho
全体がゴシック体であるのに対しキャッチコピーのみ明朝体を選択することで文字情報を際立たせること。テキスト、本文が情報であるのに対しキャッチコピーは人から発せられるメッセージであることを示している。
【font-size】
（ロゴ）19px
（見出し）20px,24px,26px（本文）16px
（キャッチコピー）40px
【余白】
（キャッチコピー）フォントサイズとほぼ同じサイズの余白。
（本文）フォントサイズの125%の余白。
（見出し）フォントサイズとほぼ同じ余白。
（各セクション間）100px以上、箇所によっては200px以上の非常に大きな余白を設けている。
各セクション間の余白をより大きく取ることで見出し、テキスト間の余白も広く取られているが情報のまとまりを認識しやすくしている。
【その他のあしらい】
・ヘッダーの下部ボーダー
ヘッダーナビにホバー した際の下部のボーダーがトップイメージの上部に表示されるというギミックが施されている。opacityの変化などといった一般的な方法では無くよりモダンでどこかキャッチーな印象を与えている。
・NEWS 各セクション上部のL型のボーダー
水平方向のみにはしるボーダーの場合、要素の端まで伸ばさなければ情報の固まりを認識できないがL型のボーダーとすることでより小さく、かつ明確に要素の固まりを示すことができている。
・技術研修、入札、材料試験の3つのブロックの立体表現
見出し横に斜めに背景色と同じ青の三角形を配置することでページ内で唯一立体的な表現を用いている。シンプルでありながら際立った印象を与えている。
【目的と工夫】
目的①：建設・土木という業界、団体を取り巻く無骨、暗い、土臭い印象を排しクリーンでモダンな明るく開かれたイメージを産み出そうとしている。
工夫①：カラーの選定
コンクリート、金属のグレーや土のブラウン系といったカラーのイメージと対極な白の背景に緑、青といった自然（植物、空、海）にまつわるカラーを選定し、サイト全体に明るくフレッシュな空気感を与えている。
工夫②：ヘッダー部のボーダーやカラーを利用した奥行きの表現、縦横のラインをずらしたカラーのブロックの配置などのモダンな手法
サイト全体のミニマルな構成に対し随所にさりげないアクセントを与える表現を用いることで、現代的な印象を与えている。
工夫③：キャッチコピーによる温もりの付与
明朝体のキャッチコピーが温かみのある印象を与えユーザーに歩み寄るような印象を与え、サイト全体に漂うシャープな空気感の中で人間的な温度を感じさせている。
目的②：ユーザビリティーに配慮し、図面や公的文書など膨大な書類と向き合わなければならない建設業界で働く人々にとって見やすく、使いやすいサイトを目指している。
①正確で無駄を省いた情報の整理、配置
余分な情報を排し、関連性の強いものを的確に整理し配置することでユーザーが必要な情報に素早く正確にアクセスしやすくしている。
②大胆な余白設定と情報のまとまりを示す表現
日頃から膨大な書類に目を通さなければならない多忙な建設業界の人々にとって文字で埋め尽くされたサイトを見ることには苦痛が伴うが、大胆な余白を設け、情報のまとまりを認識させやすくするボーダーの表現などを用いてゆとりのある印象を与えることで利用の際のストレスを大きく緩和しユーザービリティーを向上している。
③等幅フォントの選択
見出しから本文まで等幅フォントのNoto sansを選択することで整然とした印象を与え、整理整頓されたデスクで作業をするような落ち着きを与えている。
この記事が気に入ったらサポートをしてみませんか？