ホームページデザインをカッコよくしたいなら、写真やイラストにお金をかけよう!

質問
社長(不動産)

あのデザイナーは使えない!

社長(小売店)

デザインを何度も修正させているがちっともデザインがよくならない!!

美容院オーナー

デザインが気に食わないから完成直前で作り直しを命じたら、2倍の料金を請求をされた!!!

サイノ山本

多いですよね、イメージ通りのデザインを作ってこないデザイナー。 実は簡単に問題を解決できます。

私は、小さなお店や会社のホームページを作る制作会社からホームページ制作業界に入り、BtoB専門のWEBコンサルタント、大手企業とのLPOツールを活用した研究プロジェクトに参加したり、巨大企業のマンモスサイトの運営に参加したりと、ホームページ制作業界に15年ほどいます。

サイノ山本

小さなHPから大きなHPまで、HP制作15年の経験から、一番コスパの良い解決方法や、根本原因などをお話します。

目次

【結論】ホームページデザインをカッコよくしたいなら、写真やイラストにお金をかけよう!

実は、ホームページデザインは寿司のように素材によってクオリティが変わります。

  • HPデザイン=寿司説? 素材が良ければデザインが良くなる:寿司はやっぱり素材が命、函館出身の方曰く「函館の寿司は、回転寿司レベルでも想像できないほど旨い」そう。やっぱりオホーツク海で獲れる新鮮な魚は旨いんでしょうね。
  • 寿司と同じくHPデザインもやっぱり素材、写真素材やイラスト素材のクオリティが高ければかっこよくなる:ホームページを作るWEBデザイナーはピカソやゴッホのような0から創造するアーティストや芸術家ではありません。あなたの商品やサービスのことを見込み客へ分かりやすく訴求するHPを作ることが仕事。素材となる商品写真や見込み客を前のめりにする原稿がないと良いデザインが出来ません。
  • 現在はシンプルデザインがトレンド、無駄な装飾がないからこそ写真のクオリティだけで全体のイメージが変わる:スマホの普及でモバイルファーストが叫ばれており、スマホでも軽くサクサクで見やすいシンプルデザインが流行しています。デザイナーが小手先でどうこうしたり装飾を凝ることはしなくなりました。写真素材のクオリティでサイト全体の雰囲気が左右されるようになっています。
  • クオリティの高い有料写真やプロのカメラマンに撮影させた写真があるだけで段違いに:デザインの主役は写真、だからこそ写真のクオリティが重要。ケチって無料素材を使ったり、素材を提供しなければかっこいいデザインは完成しません。
サイノ山本

写真やイラスト素材のクオリティがサイト全体のデザインを左右。クオリティが高い写真はやっぱりコストも高い。


なぜ、ホームページをカッコよくしたいなら写真やイラストにお金をかけるべきなのか?

本質的なホームページの構成要素は「見出し」「画像」「文章」だけ、ビジュアル担当は「画像(写真やイラスト)」

リーダーモードをご存知ですか? ホームページ上の様々な装飾をカットし、読むことに集中できるシンプルデザインに変換する機能。safariやchromeで利用できます。

STEP
【Before】リーダーモード使用前「情報が多くごちゃごちゃ」

相互リンクや、文章やアイキャッチ画像、サイトのボタンなど情報が多くごちゃごちゃ。

出典:https://www.danshihack.com/2016/03/10/junp/iphone-tips-safari-reader.html

STEP
【After】リーダーモード使用後「デザインがシンプルになった」

余分な装飾要素を排除して文字に集中しやすくなりました。

出典:https://www.danshihack.com/2016/03/10/junp/iphone-tips-safari-reader.html

STEP
【ポイント】ページを構成しているのは「見出し」「画像」「文章」だけ

リーダーモードで装飾を極限まで削ぎ落とした結果、ページ構成要素の本質が理解できます。

  • 見出し
  • 画像
  • 文章

この3つだけなんです。

出典:https://www.danshihack.com/2016/03/10/junp/iphone-tips-safari-reader.html

サイノ山本

3つの要素の中でビジュアル担当は写真だけ。デザインをカッコよくする本質的な対処方法は、コストをかけてクオリティの高い写真を使うしかありません。


シンプルデザインが流行中 スマホで軽くて読みやすいデザインが求められている

スマートフォンが普及した結果、世界中でインターネットを楽しめるようになりました。

  • スマホが普及してネット利用者が増えた:発展途上国フィリピンで友だちになった現地人は、中古の4世代ほど前のiPhoneや、名前も知らないような中華スマホを使ってFacebookやYoutubeなどを楽しんでいました。ネット回線速度も機種性能も激遅、それが世界標準なんでしょう。
  • モバイルファースト・スマホ最適化、ネットの主役はPCからスマホに:最近の大学生はPCは持っておらずスマホのみだそう。時代が、スマホで快適に使えるホームページのデザインを求めています。軽くてサクサク、画面が小さくても読みやすい、シンプルデザインがトレンドです。
  • 製作者はスマホとPCを1つのページで管理できる手法を使うようになった:スマホとPCの両ページを、かつてのガラケーサイトとPCサイトのように毎回2つ制作するとなると作業が煩雑で値段も倍に。1つのページで自動的にスマホとPCにデザインが動的に変化する手法が導入されました。スマホでもPCでも見やすいシンプルデザインになっています。
STEP
【Before】スマホ普及前「PCでのみ閲覧するだけ、重いグラデーションを多用したデザイン」

出典:https://webbu.jp/flatdesign-2762

スマホ普及前は、PCでのみ閲覧される想定でデザインを作成。データ容量や小さくなった場合の読みやすさ、サクサク快適に見られるかなど一切考慮されていませんでした。

当時人気だったデザインはメタリックなテカテカグラデーションと影で立体感を出したデザイン。

スマホ普及前のサイトデザインの課題は、

  • 装飾が多いのでデータが増え、重くなる、PCサイトとガラケーサイトの2つ必要なので金もかかる
  • 細かい装飾が多いので、小さい画面で見ずらい
  • 要素のサイズは固定、PCとガラケーサイトは別々に作る必要があった
STEP
【After】スマホ全盛の現在「スマホでもPCでも見やすい、シンプルデザインが主流」

出典:https://webbu.jp/flatdesign-2762

スマホが普及した現在、フラットデザインやマテリアルデザインと呼ばれるシンプルなデザインが流行しています。

スマホでもPCでも読みやすく、見やすく、軽くて、サクサク。小さい画面にも大きい画面にも可変してデザインが最適化。グラデーションや影などの過剰な立体的装飾を抑え、要素をシンプルに目立たせるデザインです。

  • データが少なく軽く、表示が速い
  • 装飾・色が少ない
  • 画面サイズに応じて、各要素サイズが可変、1つのページでPCにもスマホにも対応
サイノ山本

装飾しないシンプルデザインが求められているから、素材のクオリティで勝負するしかなくなっています。


ホリエモンも言ってます「お金をケチらず、いい写真・イラストを使え!」

お金をケチらず、いい写真・イラストを使え

肝心なところでお金なんかケチるな、と声を大にして言いたい。スライドにはいい写真やイラストを使おう。

写真やイラストの1枚の値段なんて、プレゼンを成功させ、ゲットしたいものを手に入れられることの価値に比べたら、微々たるものだろう。

出典:ホリエモン流“伝わるスライド”の作り方

これはホームページではなく、パワーポイントなどで作る営業資料やプレゼン用スライドを想定した発言です。

ホームページも同じ、やっぱり有料のかっこいい素材だと完成するデザインは段違いに良くなります。

サイノ山本

ビジネスの神様とも言えるホリエモンも「ケチるな」と言っています。


HPデザインは見るものではなく「読むもの」、絵や芸術ではなく「営業ツール」

ホームページを作るために使う専用のプログラムをHTMLといいます。HTMLはHyperText Markup Languageの略で、「すげー文章を書くための言語やで」という意味。つまりtext、文書。アートや芸術のような見るものではなく、読むもの。

  • ホームページは文書、読むもの:ホームページを作るプログラム言語「HTML」はWord(代表的なワープロソフト)のような文書を作る言語。
  • 見るのではなく読むもの:派手なビジュアルやアニメーションをビジュアルで見せるものではなく、文書であり読むツール。
  • 「デザインが気に食わない」は、本質からずれている:パワーポイントで作る営業資料で「デザインが気に食わない」「おれはオーストラリアのエメラルドグリーンの空が好きだからそれを表現してくれ」なんて言わないでしょう。パワポの営業資料はHPと同じく文書、営業ツール。あれ? なんでHPはデザインが問題に…?
  • ホームページで死ぬほど考え気を使うべきはデザインではなく文章:パワポの営業資料であれば、直感的に商品やサービスの売りを訴求する短いけれど見込み客の悩みを解決する文章。導入前後をイメージできるグラフや使用イメージなど。セールスに直結することを考えるべきですが、ホームページでは文章やセールストークについては、ほとんど考えられず見た目のデザインだけ議論されます。
  • Googleはデザインを見ないが、文章は読む:HP集客ではGoogleから評価される必要があります。Googleはデザインの良し悪しを理解できません。 文章だけを読んで順位を評価します。HPデザインって重要ですか?
  • 見込み客はHPデザインで商品・サービスの検討をしない、なぜならHPデザインに金を払わないから:見込み客が判断するのは商品・サービスの機能・コスパ・口コミ・悩みを解決してくれるかどうか。あなた自身一度でもHPデザインがかっこいいから買いたくもない商品をなぜか買ってしまったことがあるでしょうか。求められているのは全盛期のジャパネット高田社長ばりのプレゼン力、セールストーク、それを文章で表現すること。ホームページは営業ツールです。
サイノ山本

目的は文字情報で商品・サービスを買いたいと思わせること、HPデザインは自己表現やアートではありません。


本当に写真・イラストがダサいだけで、HP全体のデザインまでダサくなるのか? 実例を解説

質問
社長(飲食)

言っていることはもっともかもしれないが写真なんかに金を使いたくないし、お前の話も信じたくない。

サイノ山本

ははは(汗) では、実例を見ていきましょう。

【実例】同じデザインなのにダサくなる? 映えない写真を使っただけなのに

同じデザインテーマなのに、写真クオリティが下がるだけで途端にかっこ悪くなる実例をご紹介します。

STEP
【Before】こんなかっこいいデザインのWordPressテンプレート「oops!」

WordPressのデザインテーマ「oops!」です。オシャレな縦長ページを作れるデザインテーマ。19,800円もするだけあってかっこいいですね。

  • 外人モデルのかっこいい写真を多用している
  • ロゴもかっこいい
STEP
【After】全く同じデザインテーマなのに、ダサい…
  • モデルを使ったかっこいい人物写真は1枚もない
  • 素人がスマホで撮影したような暗い風景写真のみ
  • イケてるロゴもなし
STEP
ダサいデザインしか作らないデザイナーに、粗末な素材しか渡してないってことはありませんか?
  • スマホで自分で撮影した写真(ゴミ袋や自転車などノイズになるものまで写っている)
  • 人物を主役にした写真素材を渡していない
  • 映える人物が主役の写真素材を渡していない
  • サービスを直感的に理解させる写真素材を渡していない
  • 有料写真を一切検討していない
  • ロゴがダサい

こんな状況だと、良いデザインを上げるのは難しいかもしれません。

サイノ山本

全く同じデザインテーマなのに、写真がダサいだけで、全体のデザインまでダサくなってしまいました…。 逆に言えば、良い素材にするだけでかっこいいデザインにすることも可能です。


【事実】シンプルがイケてる! グーペデザインアワードほとんど無料の標準デザイン?

HP制作ツールのグーペが主催するデザインアワード、ノミネート作品はほとんど標準の無料テンプレート。実にノミネート15作品中12サイトがシンプルな無料の標準デザイン。フルカスタマイズしたオリジナルデザインはたった3サイトしかノミネートしていません。

サイノ山本

なん…だと…、HPはデザインが命のはずなのに…、オリジナルデザインのサイトが15サイト中たった3つしかノミネートしていないなんて…。

標準テンプレートは装飾をカッコよくするためにお金をかけることもしていません。しかし、ノミネート作品はどのサイトも写真がかっこいいためにHP全体の印象が良くなっています。

atelier Chrono:広島の美容室とアトリエ

雑貨屋さんと見間違えるほどのオシャレ店舗写真が白くシンプルなHPデザインに映える。

https://atelier-chrono.com/


studio NARU:大阪のレンタルハウススタジオ

写真スタジオだけあって写真がオシャレ!

https://studionaru.photo/


設計室en:埼玉の設計事務所

脱力系ロゴなれど、やっぱり家の写真はハイクオリティ!

https://planning-en.com/


西荻ペーパートライ:東京の紙の実験室

いい感じに背景がボケた写真がオシャレ!

https://papertry.com/


野の草いのちの台所:愛媛の料理教室

シズル感のある料理写真が美味しそう!

http://nonokusagohan.com/


NANA OGAWA:フランス料理家

美人の先生の写真が素敵!

https://nana-ogawa.com/


Marble:岩手のコンセプトショップ

やっぱり写真が映えてる!

http://marble-hanamaki.com/


らくよう舎:ガーゼと刺繍

インスタグラムもオシャレ!

https://r.goope.jp/rakuyousha

サイノ山本

これらは全て無料テンプレート。どれもデザインはシンプルで装飾はなし。やっぱり写真がかっこいいだけで映えますねぇ。


企業HPの9割は集客に失敗? デザインで大爆死しないために

中小企業白書の統計データによると企業HPの9割は集客に失敗しています。経験上「ホームページはデザインさえかっこよければいいんでしょ?」とルールを勘違い、「有料写真? デザイナーなら無料でなんとかせんかい!」とデザインもダサいまま大爆死するケースが多いんです。

顧客不在で大爆死? HPは見込み客のためではなく、社長のために作られる

ホームページは見込み客のために作られるべきですが、実際は社長を満足させるために作らているようです。株式会社フォーデジットとWeb担当者Forumは、共同で行った調査結果をご紹介します。

  • サイトデザインは54%が「社長や上司が好みで決定」
  • 「消費者の意見を聞かずにデザインを決定」は90%

HPで達成すべき目的がなく、誰に何をどのように売るのかもあやふやなのに、社長の頭の中にある哲学的な概念をデザインだけで表現しようとしているというケースが多いです。ホームページはアートでも芸術でもないうえに、営業ツール。デザインで本人も何が正解か分からないあやふやなイメージを具現化するなんて不可能です。

HPデザインで大爆死ケース 3選

サイノ山本

参考までに、顧客不在で社長のためにホームページを作り大爆死したケースをご紹介。

霊園の広告を作っていたはずなのに、なぜか遊園地の広告が完成

社長が「デザイン! デザイン!」と言っているうちに(HP制作って、文化祭の準備みたいにテンション上がっちゃうんですよね)、墓の広告を作るはずが、なぜか遊園地のようなレジャー施設紹介広告的な謎の物体が完成したという狂気の現場に立ち会った話。

戦略もなくAppleのようなホームページを作りたくなった起業家の話

営業戦略上、何のためにApple風デザインのホームページが必要なのかを聞くと急に怒り出して帰ってしまわれました。戦略なんてなく、ただかっこいいからだったんでしょうね。見積もりを出すと正気に戻って連絡がこなくなるパターンです。予算が無尽蔵にあるなら娯楽としてAppleをパクったHPを持つのもいいんですが、そんな道楽できないです。

HPデザインに100万円かけた結果?

デザインが素敵なホームページも、マスターペーションにしかならずに集客できなかったというお話。

サイノ山本

とにかくデザインで失敗することが本当に多いんです。


【本当にあった痛い話】Uber社の失敗:デザインなんかしたことないのに社長がしゃしゃり出て大爆死?

配車アプリUberのCEOトラビス・カラニックが自ら指揮をし、ロゴの刷新プロジェクトを進めたそうです。デザインなんかしたこともないのに、あーだこーだとノリノリに。

ロゴデザインの目的が自己表現になってしまう

このリブランディングプロジェクトは一つの自己表現の場だったのかもしれない。そして、まわりのスタッフには’デザインのことはよくわかんないけど、重要なのは知っている。だから良いものを作りたい’と語った

サイノ山本

ロゴやアプリアイコンを作り直すプロジェクトですが、HPデザインと同じで社長の自己表現になるんですよね。パワポの営業資料作成で自己表現なんて考えますか?

サイノ山本

ほら、地方のテレビCMで「私が社長です!」みたいな恥ずかしいのあるじゃないですか。HPデザインでもあれをやってしまう社長は多いんです。

社長の頭の中にあるあやふやなアイデアを具現化するために消耗

社長のイメージを実現する為にデザイナーが必死になる

社長は夢中になっていました。自分自身の中にあるとても ’ユニークな’ デザインの好みを具現化する為に。でも周りは困惑していたんです。例えば、’とても鮮やかなパステルカラー’ などと言うものだから、本人に直接 ’もうあなたの好みを理解することは諦めました’ と伝えました。

サイノ山本

社長の頭の中にあるイメージの具現化なんか無理、正解は社長の頭の中にあるたった一つだけ。デザイナーは超能力者ではない。ユリ・ゲラーやメンタリストにでも頼むべき。

サイノ山本

見込み客ではない社長のイメージを具現化しようと消耗するのもナンセンス。「見込み客にとって使いやすい、見やすい、発見しやすいロゴはどんなデザインか?」であれば答えは無数にあり解決もできる。

ロゴ公開後の地獄

ロゴ公開後も地獄のような有様だったそう。まずは、新しいロゴをリリースした翌日にデザイン主任が辞職。デザイン主任「オナニーはママに隠れてするもんだ! 社員に見せつけるんじゃねー、マ◯ファッカー!!(脚色)」

出典:https://money.cnn.com/2016/02/02/news/companies/uber-logo-rebrand/

ユーザーからは大不評、オシャレにしすぎてアプリマークの「U」アイコンが「逆C」(視力検査のあれみたいな)になってしまい、「F◯CK! UberアプリはオレのiPhoneから消えちまったのか? どこにUアイコンがあるんだ?(脚色)」とUBERアプリをユーザーが見つけられなくなったんだとか。

奇をてらって逆Cにしてしまったら発見できませんよね。てか、メロンみたいですね。

サイノ山本

ロゴは見込み客のために作られるべきなのに、なぜ社長のために作られたんでしょうね?

サイノ山本

ちなみに、2020年現在のUberロゴはというと…

サイノ山本

わかりやすい! やっぱりシンプルが一番。

サイノ山本

社長が執着したリブランディングプロジェクトは結果として大失敗に終わり、その他でも物議をかもした結果、2017年に社長を辞任することになりました。

サイノ山本

社長さんというのは見栄っ張りが多いのと、営業をやったことが無い方が「ホームページはデザインがかっこよければ良いんでしょ」と勘違いして大爆死するケースが多いです。

見栄っ張りで失敗すること多いです

この参考記事のように見栄っ張り起業で失敗ケースは本当に多い。起業人生で一番最初にHP制作をし、それがピークでそのまま廃業するってことも多いです。


まとめ

かっこいいホームページデザインにしたいなら、有料写真などの高品質な写真・イラスト素材を使いましょう。

予算がない場合は、ホームページのデザインがかっこいいと不思議な力で商品やサービスが売れるわけでもないので、とりあえずシンプルなデザインでがまんして、後々カスタマイズするのも有効です。

HPデザインよりも重要なセールストークや文章作成に時間をかけたいですね。

制作費0円・月額4,800円のサブスクHP制作

まともなHP業者に依頼すれば軽く30万円は超えるHP、やっぱり高い…。しかし、サブスクリプションで提供することで制作費0円・月額4,800円で高性能でかっこいいデザインのHPを提供できるようになりました。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次