詳細に説明
デモサイトその1〜爽やかな青基調の建設業界ホームページ〜を制作しました。
デモサイトを制作しました。
建設業界のコーポレートサイトを想定しております。トップページのみの制作です。
サイトはこちらからご確認ください。
今回は、このサイトのデザインの特徴、こだわりを解説していきます。
※写真やテキストは仮のもので、写真はイメージに近いものを選定しております。
※最上部、最下部にあるナビゲーションは、MINIMAL WEBのものです。
メインビジュアルは印象を強く
メインビジュアルは、爽やかな印象を強くするために、全体を青色で、そのままだとシンプルすぎるため模様にリピート素材を使い、表現しました。
伝えたいメッセージをタイトルとして設定しています。
そして、どんなことをやっているかが画像で分かるように、スライドを使って作業風景を載せております。
そのまま写真を載せるのではなく、その上にうっすら白い色でカバーをしています。これは、爽やかさを担保するためで、写真によって大きくイメージが変わってしまわないように調整しております。
【MINIMAL建設について】のセクションは、真っ直ぐに伝える
テキストを中央に、言いたいことがはっきり伝わるようなデザインにしております。なので敢えて無理に装飾はせず、かつシンプルになりすぎないように「ABOUT」の装飾をつけております。
仮テキスト（テキストテキスト…）になっておりますが、ここには、このサイトを見ているユーザーに対して、語りかけるような文言が入る想定です。
青色のボタンを押すと、「MINIMAL建設について」という下層ページにリンクするような想定でデザインしております。
他セクションもそうですが、ボタンは目立つように青い背景を使っております。
【事業内容】のセクションは、複数の事業を写真で説明
今回は「建築」「土木」「住宅」と3つの事業を行っている会社さんをサンプルとして作成しました。
それぞれの事業がぱっと見で分かりやすくなるように、それぞれ写真を設置しております。
ただ3つ横並びにすると、少し単調だったため、写真は平行四辺形の枠で表現し、3つの事業説明を斜めに設置しました。
平行四辺形を選定した理由は、堅実さを表すために、ふわっとしたものではなく、角のある図形を使用した方がいいかと思いまして、このデザインにしております。
また、上下のセクションと切り分けるために、背景画像を設置しております。
背景画像は、建設業のイメージがあるかと思い、大理石の模様を使用しております。白基調なので、爽やかさを保つためにベストな背景かなと考えております。
青色のボタンを押すと、「事業内容をもっと見る」という下層ページにリンクし、事業内容を詳細に説明するといった想定でデザインしております。
【お知らせ】のセクションは、お知らせを縦並び
背景は、他のセクションとさらに切り分けるために、グレー基調にしております。
グレーはどんなイメージでも基本的には合う色ですので、他セクションで使っていない、かつそこまで大きく目立たせるところでもないため、この色を選定しました。
白枠でお知らせの一覧を括ることにより、注目が集まるようにしております。
青色のボタンを押すと、「お知らせの一覧ページ」にリンクするような想定でデザインしております。
【採用情報】のセクションは、写真を大きく使って、業務風景が分かるように
採用情報は、写真を大きく使いました。
業務風景を設置して、この企業に属する方が、どのようなイメージなのか、どんな仕事をしているのかが伝わるデザインにしております。
テキストは仮ですが、この企業に応募したい方向けにメッセージだったり、現在採用を受け付けているかどうかなどのテキストが入る想定です。
青色のボタンを押すと、「採用情報を詳しく」という下層ページにリンクし、どの業種を募集しているか、給与はどれくらいか、など詳細に説明するといった想定でデザインしております。
設計は全体的にシンプルだが、シンプルになりすぎないミニマルな設計
見ての通りとなりますが、全体的にレイアウトはシンプルに設計しております。
ミニマルな設計にしておくことで、無駄を省き、言いたいこと、伝えたいことをはっきり伝えます。
けれども、シンプルになりすぎず、独自性（今回だと、「爽やか・建設業界」）を表現するためのデザインを付け加えております。
かつ、タイトルはタイトル、ボタンはボタンと分かるような「意味のある共通化」を行っております。
内部的な理由もありまして、こういったようにシンプルな設計にしておくと、後々テキストを変えたり写真を変えたりするのが比較的簡単になったり、それによってスピード感を持って修正や更新を行うことが可能となります。
必要に応じてシステムの組み込みが必要になりますが、そういった対応も比較的簡単になるので、制作物にさらなる付加価値を提供することも可能となってきます。
まとめ
今回はデモサイトその1を紹介しました。いかがだったでしょうか？
MINIMAL WEB（ミニマルウェブ）では、デザインや設計にこだわった制作を行っております。
設計はシンプルですが、デザインは独自性を出しつつ、システムを組み込むことが特徴です。ご興味がございましたら、お問い合わせフォームよりご連絡ください。
それでは。