現在、企業の公式WEBサイトはどのように作られているのだろうか。
弊社で請け負う場合は、WordPressを使用したサイトが多いが、シンプルなHTMLを使ったサイトも少なからずある。
シンプルなサイトは表示が早く、軽い。
またユーザーにとっても、わかりやすいのが特徴だ。
企業の情報をユーザーに伝えるには絶好だと言える。
今回そんなシンプルに作られた、企業WEBサイトの制作を担当した。

企画

新たなWEBサービスを開始するにあたり、同時に新たな会社設立をする事になり、コーポレートサイトが必要になった（ちなみにこの新たなWEBサービスも弊社で請けたのだが現在まで未公開）。
サービスサイトが先に完成したため、コーポレートサイトは、そのサービスサイトのトーン＆マナーを踏襲した。

サイトマップ

載せたいコンテンツ内容を聴き、一般的な図左のサイトマップを提出。
その後、よりシンプルなシングルページを希望されたので、作り替えたのが図右のサイトマップ。
超シンプルなサイトマップである。
Adobe XDで制作し、PDFで提出した。

ワイヤーフレーム

必要なコンテンツの配置を考えつつ、ワイヤーフレームを制作。
全ページ、特に難しい内容もなく、1カラムのシンプルなワイヤーフレーム。
トップページに重要な内容は集約されていて、他のページは「個人情報～」などの企業必須ページのため、実質ほぼトップページのみのシングルページに近い構成。
ここで各コンテンツの順番や扱いの大きさなど、フィードバックを受けて修正する。
Adobe XDで制作し、PDFで提出した。

デザイン

ワイヤーフレームに従いデザインして、とりあえず1案を提出。
トーン＆マナーは、先述のWEBサービスを踏襲した。
特にこだわったのは、トップページのファーストビュー（大きな画像部分）が、どのデバイス、どのブラウザーサイズで見ても、最初に開いた時に高さが100％になること。
これは企業のメッセージがトップページの冒頭にある場合、下につながる部分を見せずに、1つの画面にユーザーを集中させるために有効なデザインだ。
またほとんどシングルページのような構成のトップページ各要素が、なるべくまとまりのある不確定な並びになることを考慮。上から普通に並べると、文字要素が少ないこともあり、あまりに整然としてしまうのを避けるためである。

デザイン案の段階で、トップページのみスマートフォン用のデザインを作る制作会社は多い。
イメージを伝える意味で、発注先次第でそれは問題なだろう。
しかし、デザインが決定した段階では、PC用ページと同じ数のスマートフォン用ページのデザインも作るべきだろう。
デザイナーとコーダーが別の場合は、一部のページデザインをコーダーに渡し「あとはそのページを参考にして適当に」ではコーダーに負担がかかる。
またデザイナーがコーダーも兼任している場合も、出来ればスマートフォン用のデザインを作ることが望ましい。コーディングしながらデザインを考えると、意外と時間がかかったり、PC用デザインとデザイン上の不整合が発覚したりするからだ。

大きな修正はなかったが、他のトップ画像と、各要素の色替えも見てみたいとのことで、基本的なデザインはそのままにして、数案を提出した。
デザイン案に関してはFigmaで制作し、PDFで提出。何故XDではないのか。特に理由はない。

その後、最初の案に決まった。

HTML & CSS コーディング

シンプルなサイトなので、余計なアニメーションやスクリプトは使わないようにした。
通常のHTMLとCSSによってフルスクラッチでコーディング。
ここまでで、今回の作業は終了。
後は、エンジニアがフォーム部分のプログラムなどを組み込む。

完成

シンプルなWEBサイトなので、表示も早く、内容も簡潔で分かりやすいサイトが完成。
実に快適。

ブログや日々の更新が必要ないのであれば、このようなシンプルなサイトを検討してみるのも良いだろう。