ホームページ制作を行う際、多くの方が見た目を優れたものにしようと悩まれると思います。
特にトップページは本でいうと表紙、制作ホームページの顔となるため、「できるだけビジュアルを良くしたい！」とご相談をいただきます。
一言にwebサイトの見た目を良くするといっても、メインビジュアルへ美麗な画像やインパクトのある写真を入れたり、動的表現を活用したりといった多様な方法があります。
他にもウィンドウ横幅に従って、画像やレイアウトが伸び縮みするタイプの「リキッドレイアウト」も最近人気で、多くのホームページで導入をされています。
ただweb制作会社へ「サイトの見た目を良くしたい」とだけ伝えても、具体的にどういった事をホームページへ行えば良いか、なかなか思いつかないのではないでしょうか。
今回の記事では、ホームページのデザイン/ビジュアルを格段に良くする方法についてご紹介いたします。
ホームページ制作の際、見た目を格段に良くする方法について/その1
メインビジュアルへ美麗な写真/インパクトのある画像を使う
こちらは最も基本的且つ有効な方法です。ホームページのメイン画像部分はサイト訪問者の目に必ず留まり、この部分へどういった内容が入っているかによって、webサイト全体のイメージが変わってきます。
メインビジュアル部分の作成サイズも重要で、横一面に大きく画像を入れた場合と、ページ横幅内で画像を配置するのでは全く印象が違います。
横幅、目一杯に画像を配置するとダイナミックな表現となり、ページを開いた瞬間のインパクトが大きくなります。勿論、その際にどういった画像を使うか？でも雰囲気が変わり、対象物のアップや躍動感のある写真を載せると、よりそのインパクト・躍動感が際立ちます。
壮大な風景やビル街の夜景画像などの使用も効果的で、見た瞬間にユーザーを惹きつけることができます。弊社エグゼクティブクリエイションのTOPページ「3つの強み」の下にも、このような見せ方を行っています。こちらはjQueryを使い、1枚目にグランドキャニオンの壮大な景色を入れ、2枚目に高層ビルのアップ、3枚目にビル街の夜景を配置しています。
インパクトのある画像を大きく配置し、その上にキャッチコピーやメッセージを重ねることで、サイト訪問者へ見てもらいやすくなるメリットがあります。
ただ、こちらの見せ方には注意点があり「使用する画像の解像度が高いこと」が前提となります。
上記エグゼクティブクリエイションTOPのjQuery画像も1枚あたりの横幅が1100ピクセル近くあります。入れる画像の解像度が低いと、画像がボケてしまいビジュアルとして非常に弱くなります。
そのため、こちらの表現を取り入れる場合は、高解像度設定のデジタルカメラで撮影を行う若しくは素材画像を大きなサイズでダウンロードしなければなりません。
さらに高解像度の写真に対し「使用するサイトデザインに合わせ、フォトショップ等のソフトを使って色調/彩度を調整する」と、より見た目良く仕上がります。画像をwebサイト内で大きく使う場合、色調や彩度の最適化は必須です。
専門の画像加工ソフトを使用することで「青空はよりクッキリと、より爽やか」になり、「夕暮れの画像は、よりオレンジ色が際立ち哀愁あるイメージ」へと変わります。メイン画像部分へどのような写真等を入れ、どういったメッセージをレイアウトするか？にこだわる事で、サイトデザインを改善することができます。
制作ホームページに合わせたjQueryやアニメーションGIFを使用する
前項目でも少し触れましたが、webサイト上で動的表現をする際、「jQuery」を活用するのが有効です。以前はホームページ上で動きを持たせるとなると、FLASHが主流でしたがiPhone等の端末で非表示になる、また2020年末に終了となることを受け、jQueryやCanvas等の技術の使用が増えています。
複数枚の画像を横スクロールさせるタイプのjQueryから、画像がフェードイン/フェードアウトするもの、ページを縦スクロールするごとにコンテンツが浮かび上がるタイプの表現もあり、制作ホームページのデザイン的特性に合わせて、取り入れましょう。
静止画のみのwebサイトに対し、動的表現を一部導入することで「一気にページ全体が凝ったイメージ」となります。最近ではFLASHの終了により「アニメーションGIF」も再注目されています。
アニメーションGIFは大掛かりな動きはできませんが、ちょっとした動的表現ができ、小さめの画像サイズで制作をすれば、比較的軽いデータ容量で実装することが可能です。
どういったブラウザでも表示されるのも大きな利点です。サイト訪問者の目をひく表現をしたい時、気軽に設置をすることができます！
今回のクリエイターコラムでは「メインビジュアルの改善」と「jQuery等、動的表現を取り入れる」の2つの方法をご紹介しました。また随時、ホームページ制作時に取り入れたい、ビジュアルを良くする手法について解説をしたいと思います。
株式エグゼクティブクリエイションでは東京を中心に企業のweb制作・運用、企画提案などを行っております。企業のブランディング重視/ビジュアル重視のサイト制作も是非お任せ下さい。
---------------------------------------------------------------
ホームページ制作を行うなら、
エグゼクティブクリエイション！
------------------------------------------------
---------------------------------------------------------------
◇ウェブサイト制作/管理についての
ご相談はコチラから
TEL: 03-5839-2512
FAX： 03-5839-2513
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
