セルフReデザイン②〜HP編〜

今回もやっていきます、過去の作品を見直して作り直してみる企画！
次はこちら！

過去に作成した架空の企業サイトになります（多分）
今改めてみると色々「まずいな…」と感じる部分がいくつかあるのでまずはその内容を並べていきます。

過去のサイトの問題点

①どこに向けた内容・サイトなのか
これがまず不明瞭。「何のためのサイト」なのでしょうかこれ…？
おそらく製造業？を想定して作っていたと思うのですが、とにかく「作る」という思いが先走って土台が出来ていません。
何のサイトかわからないから全体的にぼやけて見える。

②全体的に揃っていない
パッと見は流行りのサイトのデザインに見えますが、色々不規則。
３つ並んだコンテンツとか左寄せがなんか不自然です。あとやっぱり隙間が少なくて余裕がない。

まあつまり、全体的に「ただ作っただけ」感がマシマシですね〜！
よくこれを作品例で出せたな〜と思います。ということでまずは作る以前の問題ということで「どんなサイトを作るのか？」ペルソナ設定から練っていきます。

ペルソナ設定

どんな会社なのか？
製造業。
会社の規模は大きくないが地方で細々と続けている町工場。
車の部品や組み立ての部品を製造している。
利益はトントン。もう少し売り上げを伸ばして安定させたい。
社員は職人気質の人が多い

会社の悩み・サイトを作成する目的
若手の社員が少ないので、彼らの目にも止まるように古臭くなく洗練されたデザインがいい。しかし見にくいデザインは勘弁。
色は清潔感がある爽やかな色（ブルー系）。
ごちゃごちゃすると見にくいのですっきりしたものがいい。

サイトのイメージ

参考にしたサイト
製造業、ということでイメージを作るために既存の会社のサイトをめぐり、脳内イメージを膨らませました。最終的にいいなと感じたサイト様は以下の

・東海部品工業様　http://www.tokaibuhin.co.jp/
・大栄鉄工所様　https://daiei-ironworks.co.jp/
・株式会社キャタラー様　https://www.cataler.co.jp/
・国産部品工業株式会社様　https://www.kbk-k.co.jp/

で、これらはどれも「キービジュアルが目に入る」「トップページからわかりやすい」「何を作っているかがすぐわかる」のが良いなあと感じました。
…こんな感じでサイトの作る目的を洗いだし、参考サイトを漁りデザインを膨らませ「どんなデザインにするか」を整理しました。
多分これでもまだまだ甘い方だと思いますが、それでもだいぶ作りやすくなりました。

ワイヤーフレーム〜デザイン作成

ようやくデザイン作成です。
…その前にワイヤーフレームです。まずは脳内イメージを紙に書き出しました。

こんな感じで…
ワイヤーフレームの前のペルソナ作成時も紙に書いてまとめたのですが、紙に書いてみると頭の中が整理されてより作りたいものへの道筋がしっかりした気がします。
業務ではこれをさらに丁寧にツールを使って仕上げる必要があるとは思いますが、これは練習なんでそこは省略してデザイン作成へ。

出来上がった物

隙間をしっかり意識したのと、ジャンルの方向性を決めたのでリメイク前と比べてサイトのジャンルがはっきりしたのと、ジャンルがはっきりしたのに伴い、サイトに使う写真の選び方についての重要性について再認識することができました。ただビジネスサイトだからスーツの人を使えばいい、とかそういうぼんやりしたイメージではなくて「こういう理由だからこの写真を選んだ」とはっきり理由づけが言えるような写真の選び方が重要なんだなと。

以前デザインスクールに通っていた際に言われて度々気にするようにしている「『何となく』でデザインするのをやめよう」という言葉に通じるような気がしました。

正直、サイトデザインは3年ぶりでしたが、感覚を取り戻す上でも今回の課題は結構疲れましたがだいぶいろんなことを思い出せてなかなか楽しかったです。初心忘れるべからず、とはちょっと違う気もしますがそんな感じを味わいました。