当社サイトOPENにあたって採用したもの(デザイン・外観パーツ編)

441 view

ご無沙汰しています。谷です。

bg_company

2013年1月に法人設立してから、気づけば1年と9ヶ月。

WEBサイト制作を生業としながら、なんと自社のコーポレートサイトを作っていませんでした(((;゚д゚;)))

ありがたいことに、ご紹介だったり前職時代の先輩方他から外注・下請けで頂いたりとで、WEB制作のお仕事は途切れることなくやらせてもらっていたんですが。ただ他所様のサイト作る前に、お前のとこなんとかしたらどうだ、という声がちらほら。

作らなきゃなーとは思っていたんです。

ただ、具体的な依頼をいただける他社様の制作と違って、「自社の」サイトとなると、客観的に自分達のサービス内容だったり、強みだったり、制作メニューを具体的に詰めていくのに、妙にエネルギーが必要で。デザインや、構成も、結局「自社の」サイトとなると、どうしたもんかと変に悩んでしまって手が動かず。かといって、WEB制作会社が中途半端な状態でサイト公開できないようなぁ、なんて考えこんでしまって。

結局、自社のサイトは後回し~見てみないふり~で、ここまで来てしまいました。

shakure
御社も日々の業務に追われて、自社のホームページ、ほったらかしになってませんか?笑

こういうのは外部の人に依頼して、客観的な目線から内容を詰めてもらった方が話が進みやすいです。今回は前職時代の相棒デザイナー(ネコ好き)が新潟に遊びに来てくれたことをいいことに、一気に形にしていきました。

前置きが長くなりましたが、そんなこんなで今回、自社のサイト制作にあたって使ったもの、参考にさせてもらったものを、デザイン・レイアウト・外観に関するものにしぼって、いくつか紹介します。

可変グリッドレイアウトの為のjQueryプラグイン

当サイトのTOPページは、「可変グリッドレイアウト」というデザインを採用しています。可変グリッドレイアウトとは、ブラウザの画面サイズに合わせて、コンテンツの幅・ブロックレイアウトを可変させて、最適化表示させるもの。レスポンシブデザインの一種ってことになるかと思います。(多分)

Google検索「可変グリッドレイアウト」

当サイトのTOPページは幅475px(主にスマホ向け)~1600px(大きめのデスクトップモニタ向け)までのサイズに対応して、グリッドが可変します。ためしに、当サイトのTOPページをパソコンのブラウザの画面サイズを、広げてみたり、狭めてみたりしてみて下さい。

ワイド画面対応1600px

ワイド画面対応1600px

ノートPCとか 中サイズ

ノートPCとか 中サイズ

スマートフォンサイズ 475px (長いので下部省略)

スマートフォンサイズ 475px (長いので下部省略)

にょにょにょーん、とレイアウトを自動整列されている動きがわかりますか?
これを実装するために使用しているのが、↓のJqueryプラグインです。

可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog
DEMO

海外製のものも含めて、いくつか可変グリッドレイアウトのためのjQueryプラグインを試してみましたが、上記のものが、一番精度が高かったです。おすすめします。

このレイアウトは、マス目のようになったボックスが整列していく形になるので、構成としては、ややごチャついた印象にもなりがちです。新聞記事のようなイメージで、マガジンサイト、ニュースサイトなどでよく使用されます。

当社サイトにおいては、「遊び心」重視で採用しました 笑。あんまりカッチリしたサイトの雰囲気出してしまうと、現実とのギャップがでるので・・・汗。

スマホ表示に対応しやすく、結構いろんなことやってるんだなー、というのがファーストインプレッションでイメージしてもらいやすいのも、このレイアウトの良い所かと思います。

40種類以上のホバーエフェクト HOVER.CSS

ついつい触りたくなる楽しい動きが満載のホバーエフェクト。マウスを乗せたときの、動きのことです。
TOPページのロゴが、ブルブルっとなる動きとかはこれを使ってます。

マウスを載せると、拡大しながらちょっと回ったり。

マウスを載せると、拡大しながらちょっと回ったり。

実装も非常に簡単です。ちょっと触りたくなって、つい押してしまいます。
あんまりやるとくどいんですけど笑。

■HOVER.CSS
HOVER.CSS

CSSでふわふわさせるアニメーション

今は、ちょっとした動きはCSSだけで簡単に実現できるので、目立たせたいところにはちょっと動きをつけてみるといいです。
スマートフォンでも対応していて、軽快なのがいいです。

ロゴをふわふわさせてみました

ロゴをふわふわさせてみました

↓のナビゲーションの動きを参考にしました。

■ふわふわナビゲーション
ふわふわナビゲーション – JSFiddle

スマートなスクロールバー PerfectScroll

デフォルトのスクロールバーがやぼったいので、スマートな感じに。

ビフォー

ビフォー

アフター

アフター

間違い探しみたいですね。
こういうちょっとしたことの積み重ねでクオリティって変わると思うんですけど。でもそういうのが積み重なって結局工数かかってくるんですよね。

■Perfect Scroll
Perfect-scroll

横から出てくるメニュー Sidr

クリックすると、横からメニューが展開するjQueryプラグイン Sidrをスマートフォン表示用に組み込んでみました。
ヘッダーのMENUをクリックすると右から飛び出します。

sidr

■Sidr
Sidr – A jQuery plugin for creating side menus

おわりに

本記事では当社のコーポレートサイトで、デザイン・外観パーツに使用したものをいくつかピックアップしてみました。

御社のサイトで使えそうなものはありましたか?
ホームページに関するお悩み、カスタマイズのご希望、制作のご依頼などがありましたらお気軽にご相談ください!

他社制作サイトでも対応可能です!

それでは。また次回。

WRITER

谷 俊介

代表取締役 谷 俊介

この会社の代表取締役。1987年生まれのゆとり第一世代。
海城高校・上智大学法学部出身。

大学在学中から西新宿のITベンチャーでSEO/SEM・WEBマーケティングに携わった後、23歳の時に愉快な仲間達と新潟に移住し独立。気づけば立派なアラサー。

TAGS