1.現代風Webサイトの特徴とは?
実際に現代風Webサイトの例をチェックする前に、現代風Webサイトが持つ特徴について、簡単におさらいしましょう。 詳細を知りたい方は、このコラムに目を通す前に『【HP、放置していませんか?】~現代風WEBサイトの基本~』もご覧ください。
①SSL対応
SSLとは「Secure Socket Layer」を略した単語で、インターネット上で通信を暗号化する仕組みのことをいいます。
ブラウザから何らかのページを閲覧している際、URLの左に南京錠のマークが表示されている場合、それはSSL対応のWebサイトであることを意味します。
②レスポンシブデザイン
レスポンシブデザインとは、Webサイト閲覧時に使用している端末の画面サイズによって、1文の幅など各種表示が変化するデザインのことをいいます。レスポンシブデザインを採用しているWebサイトは、様々な端末でアクセスするユーザーの環境に応じて、レイアウトが適切な形に変わるようになっています。
③動画の使用
企業のWebサイトは、主に自社や商品・社員等の紹介を行う目的で利用されますが、その際に動画コンテンツを掲載すると、サイト訪問者がより長く自社のWebサイトを閲覧してくれる傾向にあります。
文章と画像だけでも、ある程度はユーザーに情報を伝えられますが、動画を掲載することで、より言いたいこと・伝えたいことを分かりやすくまとめられるでしょう。
④ブランドイメージに適したデザイン
コーポレートサイトは、自社に接する多くのユーザーに対して、自社の情報を伝えるために運用するものです。 その点を踏まえ、できる限りブランドイメージを前面に出したデザインを採用すると、自社のブランディングに各種Webサイトを活用できます。
⑤ユーザーの行動を促すアニメーション
テキスト中心のWebサイトは、文字に慣れ親しんでいる人にとっては読みやすいですが、そうでない人にとっては退屈な場合があります。
そこで、ユーザーの行動を促すアニメーション、例えばアイコンやフレーズに動きが生まれるWebサイトを作り込むと、視覚情報だけでは得られない「体験」をユーザーに提供できます。
2.現代風のおしゃれなホームページの企業
先にお伝えした特徴を踏まえた上で、現代風のおしゃれなホームページの実例として、特に優れた8社のホームページをご紹介します。
なお、今回ご紹介する8社のWebサイトはすべてSSLに対応しており、レスポンシブデザインを採用しています。
・株式会社サクラクレパス :コーポレートサイト
株式会社サクラクレパスより引用
株式会社サクラクレパスは、小学校の図画工作でおなじみの「クレパス」を開発した企業です。 絵を描く楽しみを提供する企業ということもあって、Webサイトも遊び心のあるデザインで、Webサイト全体が「どんなユーザーがクレパスを使うのか」考え抜いた上で構成されている印象を受けます。
具体的には、スクロールするたびに動くアニメーションが魅力的で、ユーザーとしてもつい「スクロールして続きを見たくなる」デザインとなっています。
また、紹介されているおすすめ商品は、それぞれの画像がユニークに表示されていて、かつ初めて見る人にも分かりやすく仕上げられています。
その他、子ども写生大会のように、ユーザーが作品を発表できる機会を設け、作品をサイト内で公開していることも特徴的です。サイト訪問者に“体験”を提供することで、ユーザーに「自分もクレパスで何か描いてみたい」という気持ちを想起させるねらいがあるものと推察されます。
・株式会社豊島屋 :コーポレートサイト
株式会社豊島屋より引用
株式会社豊島屋は、鎌倉土産で知られる「鳩サブレー」を製造・販売している企業です。 ユーザーがWebサイトを訪れた際に出迎えてくれる、黄色の背景と鳩のキャラクターが、ブランドイメージを強調しつつインパクトの強いものとなっています。
鳩サブレーの壁紙・動く鳩のアイコンなど、その可愛らしさからまた訪問したくなるようなデザインは、多くのユーザーの好奇心を刺激します。
歴史的な背景も踏まえた商品説明も、自社のブランディングに貢献しており、例えば「鳩のつぶやき」のタブをクリックすると、なぜ鳩サブレーが生まれたのか、その経緯が墨絵のような挿絵とともに詳しく説明されています。
・株式会社 虎屋 :コーポレートサイト
株式会社虎屋より引用
株式会社虎屋は、室町時代後期に京都で創業後、五世紀にわたり和菓子屋を営んできた、古い歴史を持つ企業です。
商品自体の知名度が高いことを活かし、トップページのデザインをシンプルにまとめ、メインの商品を目立ちやすくしている点が特徴的です。
コーポレートサイトに限らず、Webサイトのデザインを検討する場合、何らかの装飾を施そうと考える企業は多いかもしれません。
しかし、虎屋のトップページは、薄紫色を背景にしたシンプルなデザインで、メインの商品を目立ちやすくしています。
様々な装飾をあえて行わず、シンプルなデザインに終始することで、その“上品”なブランドイメージを守っているのです。
・株式会社星野リゾート :サービスサイト
株式会社星野リゾートより引用
株式会社星野リゾートは、全国各地に宿泊施設・リゾート施設を展開している企業です。 Webサイトも、そのようなブランドイメージを強く感じさせるデザインとなっています。
トップページでは、自社で運営する各施設が海に浮かんだ「島」のようにデザインされており、さながらテレビゲームのステージセレクト(マップ)のように、思わず島の絵をクリックしたくなるような“わくわく感”があります。 マップの中で、旅が持つ「自分が行きたいところを選んで行ける」という楽しさを、早くもサイト内で体験できるのです。
実用面では、施設検索・施設一覧など、ユーザーが知りたい情報がサイト上部にまとまっているのも特徴です。 遊び心があるだけでなく、機能面も充実している点は、日本の旅産業で強い存在感を放つ星野リゾートならではの“おもてなし”といえるでしょう。
・ヤマト運輸株式会社 :サービスサイト
ヤマト運輸株式会社より引用
ヤマト運輸株式会社は、1919年創業の配送会社です。 時代のニーズとともに、宅急便・EC向け配送などサービスを変化させていますが、多くの人にとって「クロネコヤマトの宅急便」のイメージは根強いものです。
サイト内に企業カラーである黄色・黒色をちりばめ、企業イメージを強調しているのは、そのあたりの事情があってのことと考えられます。
実際にトップページを見ると、トラック・ドローン・縁側・飛行機など、様々な場所で見かけるクロネコのイメージキャラクターが大きく表示されます。
また、トップページから「個人のお客様」・「法人のお客様」等のメニューを選択することで、それぞれのユーザーが見たいサイトへと移動できるようになっているのも特徴です。
画像に関しては、メニューを選択しなければ自動再生で切り替わりますが、メニューにカーソルを合わせると固定されるため、ユーザーがクリックした先をイメージしやすいでしょう。
・秘境 白川源泉 山荘 竹ふえ :求人サイト
秘境 白川源泉 山荘 竹ふえより引用
竹ふえは、2000年に熊本県阿蘇郡南小国町に創業した温泉旅館で、秘境ともいえる立地の中、顧客の4割が海外からやって来るほどの強いブランド力を持っています。
求人サイトは、クリック(PCではマウスオーバー)をした際に動き出すアニメーションが採用されており、思わずクリックしたくなるようなデザインです。
背景は黒く、高級感を漂わせる一方で、それぞれのアイコンには和を感じるデザインが施されています。
「先輩を紹介」のページでは、現在働いているスタッフの凛とした顔が表示され、働き甲斐のある職場であることが求職者に伝わってくるようです。
・株式会社プロスパーデザイン グランド・ガーデン
株式会社プロスパーデザイン グランド・ガーデンより引用
株式会社プロスパーデザインは、リゾート開発・設計を手掛ける企業ですが、2007年にプールの販売・設計・施工を行う専門の事業部「グランド・ガーデン」を立ち上げています。
自宅にプールを施工するという、日本ではあまり見かけないサービスを展開しているため、Webサイトのデザインも手が凝ったものとなっています。
トップページでは、プールのある自宅の写真を背景に高級感のあるフォントを使用して「GRAND GARDEN」の事業部名を大きく強調しています。
使用するフォントの種類によってWebサイト全体のイメージが大きく変わるので、こだわるべきポイントの1つと言えますね。
また、スクロールをして最下部まで行くと、動画が使用されているのが確認できます。
写真やテキストだけでなく動画も使用することで、Webサイトに動きを付けることが出来ています。
「Webサイトに動きをあまりつけたくない」という方でも、このようにさりげなく動画を用いることで、単調にならずに済むでしょう。
施工事例では、実際に施工された家々の画像を見ることができ、実際に施工した状況をイメージするのにも役立ちます。
・コーワテック株式会社 :コーポレートサイト
コーワテック株式会社より引用
コーワテック株式会社は、特殊車の製造販売を行う企業で、ロボットの設計開発・製造・販売等も手掛けています。
トップページでは、水陸両用バスや建機を運転するロボットなどの動画が再生され、企業がどのような事業を展開しているかが一目で分かりやすいレイアウトとなっています。
製品情報・各種ニュースへのアクセスも、トップページから下にスクロールすれば確認できるようになっています。
企業からのメッセージに関しては、日本語だけでなく英語でも記載されており、世界中のユーザーに自社の情報を伝えるねらいがあるものと考えられます。
3.まとめ
他社のおしゃれなWebサイト・ECサイトは、自社のサイトを見直す際に、非常に重要な情報源となります。 なぜなら、現代風のサイトの特徴について、各種サイトを見ながら・触りながら学べるからです。
しかし、自社のコーポレートサイト・ECサイトの活用の重要性は理解していても、勉強や構築に時間をかけられない企業担当者の方も多いはずです。
そのような方は、Webサイトの更新・修正、ECサイトへの商品登録等をサポートできる【オンラインワーカーなげっぱ】が便利です。
オンラインワーカーなげっぱを運営するTEAMWORKS株式会社は、サーバーレンタルやWebサイト・ECサイト制作等を手掛けており、設立25年の実績がございます。
実は、ご紹介したWebサイト8つのうち、竹ふえ様・グランドガーデン様・コーワテック株式会社様のWebサイトは、TEAMWORKS株式会社で制作に携わらせていただいたものです。
また、TEAMWORKS株式会社は「IT導入補助金」の支援事業者であり、Webサイト制作にあたっては補助金の観点からもサポートが可能です。
ECサイトの制作であれば、IT導入補助金の利用も視野に入れてプランを立てられるため、制作するなら今がチャンスです!
現代風のWebサイト構築に向けて、最初の一歩が踏み出せずお悩みの方は、ぜひオンラインワーカーなげっぱ®の利用をご検討ください。