製造業にとって最適なホームページのデザインとは?

【執筆者紹介】渡部 仁志
この記事の執筆者
渡部 仁志
会社名:テクノポート株式会社
役職:コンサルティング課、上級ウェブ解析士
執筆テーマ:ホームページの制作に役立つ記事や、Webに関する最新情報など
【経歴】
2013年入社。
ホームページ制作ディレクションやWeb解析の仕事に従事。上級ウェブ解析士の資格を持ち、GA4の活用方法について幅広い知見を持つ。
渡部 仁志 が執筆した他の記事をみる

こんにちは、テクノポートの渡部です。

ホームページ制作の企画が決まって、デザインの段階になったときにお客様に要望を聞くのですが、その際に「今の流行りやトレンドって何ですか?」といった質問を受けることがあります。端的に言えば今は「フラットデザイン」から、次のデザインへの変化の時期へ移り変わっている時期といえます(2018年5月時点)。次のデザインが何なのかについては、アニメーションを使ったものなど、たくさん出てきていますが、次のトレンドが何になるかはまだ定まっていないようです。

確かに、きれいでかっこいいデザインにしたいというのはあるかと思いますが、本日はこれまでのデザインの歴史を考えながら、製造業にとって最適なホームページのデザインは何なのかについて考えてみたいと思います。

製造業にとっての良いデザインとは?

確かに「流行り」や「トレンド」を取り入れることは大切だと思いますが、後述する「体験型」のホームページが製造業にとって最適かと言われればそうではないと思います。先に結論をお伝えすると私のオススメは

「フラットなアイコンやバナーとスペースに余裕を持ったデザイン」

今の時代にあった、フラットなアイコンやバナーとスペースに余裕を持ったデザインです。見る人が一般ユーザーではなく、忙しいビジネスマンである事を想定すると変にアニメーションや、動画を多用するよりは、テキストや画像などでひと目でわかりすいデザインの方が良いと思います。ただ、スマホで情報収集する人も増えてきていますので、スマホ対応のレスポンシブルデザインにしておく方が良いでしょう。

流行りやトレンドが出来る理由

ファッションの世界等では、有名なブランドがその年の流行りやトレンドを作るとも言われていますが、ホームページのデザインの場合は少し違うと感じています。ホームページのデザインにおいて、流行りやトレンドが生まれるのには、その時代の背景がとても大きく影響しています。絵を描くようなデザインとは異なり、技術的な要素が色濃く反映されているのが特徴で、デザイナーというよりは制作するエンジニアがホームページのデザインのトレンドを作ってきたと感じます。

ポイントは「回線速度」と「スマホの普及」です。

かなり昔(ホームページ誕生初期~2000年)

HTMLとCSSのみのテキストが中心のデザイン

この頃はインターネットの回線速度が電話回線を使ったりとそれほど早くなかったため、画像を多く使用すると、「読み込みに時間がかかる」といった問題が発生していました。なので、画像はできるだけ使用せず、テキストが中心のホームページでした。

俳優の阿部寛さんの公式ホームページが今でもこの方式で制作されていて、懐かしいと感じる方もいらっしゃるのではないでしょうか?

http://abehiroshi.la.coocan.jp/

少し昔から(2000年ぐらい~)

画像が多くなり1ページを意識したデザイン

日本でADSLが導入された2000年を境にインターネットの回線速度が早くなり、画像を多用しても、ある程度読み込みが早くなってきたました。そのため、画像を多用し、カラフルで見やすいホームページのデザインが主流になってきます。 2010年頃のホンダのホームページみたいなイメージです。

http://web.archive.org/web/20100315030156/http://www.honda.co.jp:80/

ちょっと前から(2010年ぐらい~)

JavaScript、JQuery、flashなどを使った動きのあるデザイン

段々ホームページを制作するエンジニアの技術が向上してきて、「キャッチ画像がスライドする」「アニメーションが追加される」などの「動き」がホームページにも取り入れられるようになってきました。Flashは一時期盛況な時期がありましたが、ブラウザの方が対応をやめることが多くなり、今はあまり使われなくなりました。何よりもスマホの普及し始めたこの頃に「スマホで対応してない」ということがあったため、廃れていったというのが本当のところだと感じています。

東京消防庁(2018年5月現在)の様なホームページです。

http://www.tfd.metro.tokyo.jp/

今(2015年ぐらい~)

フラットなアイコンやバナーとスペースに余裕を持ったデザイン

益々スマホが普及し始めると、横長のデスクトップの画面に対して小さい縦長のスマホでもきれいに見れることが重要視されてきました。そこで、いわゆるレスポンシブルデザインと相性がいい「フラットデザイン」というのが今の本流となっています。

フラットデザインとは光沢感や立体感という視覚効果を、一切使用しないデザインの事を言います。

立体的なデザインがデスクトップではきれいに見えたものの、スマートフォンの画面ではうまく印象を与えることができないことが多々発生し、フラットデザインであれば、どんなデバイスでも印象があまり変わらないという理由からです。

弊社の制作事例だと下記の様なサイトになります。

リングアンドリンク株式会社

https://ring-and-link.co.jp/

これから(予想)

動画やアニメーションを使った体験型のデザイン

あくまでも予想ですが、これからは動画やアニメーションを取り入れたサイトが増えてくるのではないかと思います。デスクトップだけでなく、スマホでも高速の通信が可能になり、youtubeなどの動画サービスをスマホで見ている人も多いのではないでしょうか?

2014年にはFlashに変わって、ブラウザ上でも様々な動きを実装できるHTML5というホームページの技術が確立され、ますます「情報収集」という範囲を超えたホームページを「体験」するようなサイトが増えてくるのではないかと思います。

例えばこんなサイト

https://sustotena.koikeya.co.jp/

いかがだったでしょうか?

確かにトレンドを捉えることも重要ですが、何よりもそれを見る人があってのホームページなので、ターゲットにあわせたデザインを心がけましょう。

この記事の執筆者
渡部 仁志
会社名:テクノポート株式会社
役職:コンサルティング課、上級ウェブ解析士
執筆テーマ:ホームページの制作に役立つ記事や、Webに関する最新情報など
【経歴】
2013年入社。
ホームページ制作ディレクションやWeb解析の仕事に従事。上級ウェブ解析士の資格を持ち、GA4の活用方法について幅広い知見を持つ。
渡部 仁志 が執筆した他の記事をみる

関連記事