他社と差をつけるホームページデザイン

レスポンシブに対応したホームページ
有限会社香月 森一輝
筆者:Mori Ikki

近頃のホームページにはユーザーを飽きさせない工夫がたくさん施されています。
そこで今回は普通のホームペ時に「ちょっとした遊び心」をプラスすることでユーザーを飽きさせないための要素をご紹介します。
たくさんありすぎるのでまずは第一弾と言うことで、皆さんも一度は見たことがあるデザインの要素からご紹介していきます。

Slide 1 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 3 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Previous slide
Next slide

スライダー

まずはど定番のスライダーです。最近ではトップページいっぱいに表示されていてスライダーの中にコンテンツが含まれているサイトもよく目にします。
言わずともではありますが、静止画と比べるとインパクトがあり、モバイルでも横にスクロールできるのでストレスフリーでたくさんの情報を伝えることができます。
導入していない方はホームページのページトップの画像をスライダーに変えるだけでだいぶ今時になりますよ!

カルーセル

カルーセルは画像や映像とともに文章を追加できます。
メニューやサービス情報などに利用されているサイトが多い印象で文章の下に仮想ページへのリンクが追加されたりしています。文章だけと違って視覚に訴える事ができるので、様々な使い方ができます。
またモバイルやタブレットからの閲覧にも向いています。

動画を利用する

KAGETUへようこそ
Welcome to KAGETU

近年少しずつ増えては来ましたがまだまだ普及していません。
個人的に他社との差別化や、ブランディング目的のサイトに用いると一番わかりやすくこれだけで全体のイメージが変わります。
また会社案内や、商品説明にも動画を用いる事で、離脱率の削減が期待できます。
今文章を読む事に慣れておらず、Youtubeなどの動画配信サービスが注目されています。
特に若者をターゲットにした企業は導入されることをオススメします。

モーションに遊びを加える

クリックして下さい

Easily add or remove any text on your flip box!

Back Side

Easily add or remove any text on your flip box!

Read More
クリックして下さい

Easily add or remove any text on your flip box!

Back Side

Easily add or remove any text on your flip box!

Read More
クリックして下さい

Easily add or remove any text on your flip box!

Back Side

Easily add or remove any text on your flip box!

Read More

上記の例はフリップボックスですが様々な要素には動きを尽きる事ができます。
クリックした時の反応が少し違うだけでおしゃれに見えますし、誰かが友達にシェアしてくれることもあります。

数値を視覚的に伝える

Pie Chart
0%
0%

ほとんどのウェブサイトで数値やデータは表で表示されています。
しかし読むのに時間がかかりますし、ぱっと見て理解することはできません。
上記のように動的な図で表示することによりユーザーは理解しやすく、見た目にもインパクトが出ます。

まとめ

今回はつまらないホームページに遊びごごろを加えて差別化する方法をいくつかご紹介しました。
こうしたデザインはシンプルな文字だけの構成よりもはるかにユーザーに伝えたいことを直感的に伝える事ができます。
当社ではホームページのリニューアルも行っています。
どこにでもあるホームページ をあっと言わせる遊び後ごろのあるホームページにリニューアルしてみませんか?

関連する投稿
Related Posts
ホームページ用の写真の準備に困っていませんか?
ホームページを制作するウェブ制作車
小規模事業者持続化補助金を活用したホームページ・ECサイトの開設
アドレスバーに「安全ではありません」あなたのサイトは大丈夫?
ギガファイルでデータを受け取る方法
ギガファイル便でデータを受け取る方法
政府サービスへのアクセスを楽にするgBizIDの発行手順
ホームページの種類一覧
9つのホームページの種類と業種・目的に合わせた役割
最新の投稿
Latest Posts
丸亀市産業振興支援補助金申請サポート開始のお知らせ
PC組み立ての最適サイクル
インボイス対応のアプリと香月カゲツのECサイト制作の専門性
ホームページ用の素材に使える写真プロと素人の違い
ホームページ用の素材に使える写真プロと素人の違い
IT導入補助金を使ったECサイトの構築
ECサイト構築に使えるIT導入補助金2023デジタル化基盤導入枠
IT導入補助金2023年
2023年度 受付開始!最大350万円交付の「IT導入補助金2023」
私たちについて
ABOUT US
上部へスクロール