サイトのデザインをリニューアルした時に考えたこと5つ

ウェブ全般

おはようございます。樋口です。
本日、キタックCGソリューションセンターのWebサイトのデザインをリニューアルしました。
サイトを立ち上げて4ヶ月が経過し、現状のデザインに飽きたので、善は急げとばかりに変えてしまいました。

作業の流れとしては、このサイトはWordpressでできてるので、テスト環境に公開中の状態を再現し、テーマをカスタマイズしていきました。
そしてできたテーマを本番のWordpressに格納し、有効化しました。

今回は機能の追加はなく、デザインのみのリニューアルです。
今日は、デザインリニューアルにあたり、少し考えたというか、留意したポイントがいくつかあるので、発表いたします。

サイトのリニューアル

シンプルに

制作するときに根底にある考え方はこれです。
たぶんあらゆる制作者、デザイナーが追求していることなんじゃないかと(あくまでたぶんですが)。
だけど、成功させるのは容易ではないです。
「シンプルさ」とは何か、というと大それすぎているので、あくまでこれまでのサイトと比べてなのですが、できるだけ簡潔に、すっきりと、分かりやすく、ということを念頭に置いて作りました。

記事を読んでもらうサイトでは、ぱっと見た時にごちゃごちゃしていないことが重要なので、白ベースで余白も充分とり、すっきりさせました。
フォントサイズや要素の大きさも全体的に小さくし、圧迫感を取り除きました。
色も黒、白、グレーを基調とし、色数をできるだけ抑えてあります。

また、アイコンや英字を多用しました。
伝わるかどうか不安に駆られ、つい冗長な説明を付加してしまいがちですが、Webデザインは見る人が能動的に使うためのデザインということもあり、ファーストコンタクトでは情報を最小限にしておき、興味を惹いた人にのみ詳細を届ける、というスタンスにしました。

拡張性を考慮

Webサイトは変化し、どんどん拡張していくものです。
今後、必要に応じてさまざまなバージョンアップ、変更が予想されます。
それに対応できるような懐の深さを目指しました。

デザイン面でも、作り込み過ぎてしまうと身動きがとりづらくなるので、柔軟に姿かたちを変えられるようなコンセプトです。

動作を軽く

モバイルでの利用を考え、可能な限り動作を軽くするよう配慮しました。
具体的には、画像を使わずCSSで表現する、重いjQueryプラグインを使わない、Wordpressのキャッシュ操作などです。

ただ、Facebook、Twitterのソーシャルプラグインの読み込みに、どうしても時間がかかってしまうのがネックです。
ソーシャル連携は入れておきたいため、うまい代替手段を検討中です。

※ソーシャルボタンをアイコンフォントで置き換え、リンク&カウント取得にすることで対応しました。(10/5)

モバイルで見やすく

現状、このサイトはモバイルでの閲覧が3割弱です。
スマートフォンでストレスなく閲覧できるように、というのは至上命題です。

まず先ほどの「軽さ」を追求します。
その上で、スマートフォンでの見え方のために、細かくスタイリングしました。
フォントサイズ、余白、レイアウトなど、PCとスマートフォンそれぞれに最適化しています。

情報の階層構造を意識

情報の階層構造を意識しました。
当サイトのメインコンテンツはやはりブログなので、まず記事を読んでもらい、興味を持っていただいた方に対して、サービス内容やその他のコンテンツに誘導できるようにしました。

具体的には、下記のような内容です。

  • TOPの左上、一番目立つところにピックアップ記事をのせる
  • 会社の紹介はキャッチコピーのみ。リンクをクリックしてくれた方をターゲットに、各ページで詳述
  • ServiceやContactなどのメニューは、ヘッダーに小さめに配置。だけどいつでもとべるように固定表示
  • 記事のカテゴリや日付別アーカイブは、右側に小さく表示。興味があればいつでも移動できる(PC)
  • 記事の一覧はタイル上に並べる。過去記事がぱっと見られて、選びやすくなる(PC)

以上、デザインリニューアルの際に考えたポイントを発表しました。

デザインは、また変わる可能性があります。
機能拡張したり、コンテンツが増えたり、ライターが増えたり、という変化により、このデザインがそぐわなくなることもあるでしょう。
そうなれば、その状況に合うデザインをまた模索します。
ウェブサイトは、こういうふうに変化し続けていくのがいいと、私は考えています。

ともあれ、しばらくこのデザインで続けてまいりますので、よろしくお願いします。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。