ノンプログラマー必見!たったの10分で最新サイトのUIを構築する方法!

634725249_84cdda6333_b

最近のWEBサイトは操作性を良くする為に様々な細工がされています。

WEBデザイナーの方は頭を悩ます方も多いでしょう。

javascript等の専門的な知識が必要になる為、サイト自体の構造が分からないなんて事も多々ありますよね。

今日はCCCさんのサイトを例に見ていきましょう。

 

サイト全体の挙動の確認

CCCさんのサイトはパソコンのウインドウを狭めたり、広くしたりして頂くと分かりますがサイト自体が横幅に応じて形を変えます。

このようなサイトをレスポンシブサイトと言います。

CSSのメディアクエリ(ウインドウ幅によってCSSを適用させるテクニック)を使用してサイトを構築していきます。

 

ヘッダ

まずはヘッダに関してですが、こちらはflex sliderというjqueryで同じ動きを再現できます。

flex sliderについてはこちらの記事で詳しく紹介されています。

オンズさん|【jQuery】超万能スライダー FlexSlider の使い方をマスターする

 

 

カルーセルスライダー

次にヘッダ下の画像のスライド部分ですが、こちらはslickというjqueryで再現しました。

slickについてはこちらの記事で詳しく紹介されています。

コリスさん|[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick

レスポンシブのカルーセルはslickが一番使いやすかったです。

 

メニュー

スマホサイトの場合、メニューが右上に出現します。

タップすると、画面全体が左に移動してメニューが表示されます。

一般的にはドロワーメニューと呼ばれるものです。

いろいろ試しみた結果、こちらで紹介されているjSlideMenuを実装しました。

Qiitaさん|JavaScript – Googleから学ぶ ヌルヌルサクサクなスライドメニュー

CCCさんとは若干動作が違いますが、ぬるっと動く感じと、メニューを閉じる際のインターフェースが好みでしたのでこちらを紹介させて頂きました。

 

まとめ

最新のサイトではどういった技術が使用されているか、ざっくり把握する事は大事です。

これからサイトを一から作成する場合は、デザインだけでなくユーザーに対する動きも考慮した設計が求められてきますので、皆さんも気になるUI等は一度調べてみる事をお勧めします。

Sponsored Link

コメントを残す