週刊Webテク通信

2015年10月第4週号 1位は,Webデザインのスクロールに関する新ルール,気になるネタは,アップルが新型Bluetoothキーボードとマウス,トラックパッドを発表

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2015年10月12日~10月18日の間に見つけた記事のベスト5です。

1. The New Rules for Scrolling in Web Design - Designmodohttp://designmodo.com/scrolling-web-design/

Webデザインのスクロールに関する新ルールとして,スクロールを活用するヒントなどを紹介しています。

長いスクロールをうまく使うためのヒントとして,以下の8点が紹介されていました。

  1. コンテンツによりスクロールの長さが変わってくる。長いスクロールはランディングページに向いている
  2. スクロールに追随しない固定ナビゲーションを利用する
  3. どのようにサイトが機能するかがすぐわかるようにする。スクロールを促すための矢印やボタン,⁠Scroll for More」のような指示を入れる
  4. スクロールのためのクリック/タップと,他の動作のためのボタンとの明確な区別をする
  5. ユーザーがスクロールによる操作をどのようにしているのかリサーチする
  6. やり過ぎない。500ページもの長さをスクロールさせるようにはしない
  7. ユーザーにとっての目的に焦点を当てる
  8. 現在見ている位置・状況への手がかりとなる要素を加える

画面の狭いモバイルデバイスの影響もあり,スクロールは生まれ変わったとのことで,スクロールすることへの抵抗感も減っているそうです。

図1 Webデザインにスクロールを利用するヒント

図1 Webデザインにスクロールを利用するヒント

2. 25 Website Designs Which Use Animation Perfectlyhttp://line25.com/inspiration/website-designs-which-use-animation

アニメーションを完璧に使ったサイトのギャラリーです。

スクロールに合わせてアニメーションする形式のものが多く,1位の記事と同様に,長いスクロールをうまく使ったWebデザインのヒントが得られます。

スクロールを促すための仕掛けの実例もいろいろ見られました。

図2 アニメーションを完璧に使ったサイトのギャラリー

図2 アニメーションを完璧に使ったサイトのギャラリー

3. CSS Floats Explained in 5 Questions - Hongkiathttp://www.hongkiat.com/blog/css-floats/

CSSのFloatに関する5つの疑問に対する解説です。

  1. どの要素がフロートしないのか
  2. フロートするとき何が起きるのか
  3. フロートしたエレメント同士はどういう表示になるのか
  4. フロートした親子間はどういう表示になるのか
  5. どうやってフロートを解除するのか

最後にフロートに関するまとめが載っており参考になります。

図3 CSSのFloatに関する5つの疑問

図3 CSSのFloatに関する5つの疑問

4. Inspiring Web Design – End The Echohttp://endtheecho.com/

Webデザインのインスピレーションになるものを紹介したギャラリーサイトです。

実際の電化製品のボタンの写真などが掲載してあり,現実の製品や自然物をデザインの参考にしようという意図でまとめられています。

図4 Webデザインのインスピレーションになる写真ギャラリー

図4 Webデザインのインスピレーションになる写真ギャラリー

5. 130+ Ready to Use Pre-made Layouts will Help You Complete Projects Faster | Web Resources | WebAppershttp://www.webappers.com/2015/10/14/130-ready-to-use-pre-made-layouts-will-help-you-complete-projects-faster/

Webサイトを素早く立ち上げるためのWordPressのテーマを紹介しています。

豊富なテーマを1クリックでインストールでき簡単にカスタマイズできるサービスの紹介ですが,各テーマはレイアウトやインターフェイスの現在のトレンドを取り入れたものばかりで参考になります。

図5 素早くサイトを作るためのWordPressテーマ

図5 素早くサイトを作るためのWordPressテーマ

そのほか,最近の記事の中から,気になるニュース記事を紹介します。

先週の気になるWebサービス

Blend - Generate simple and beautiful CSS3 gradients.http://colinkeany.com/blend/

Blendはシンプルで使いやすい,グラデーションを作るサービスです。グラデーションを画面で確認してCSSのコードをコピーすることができます。

左右に表示したパレットから色を選んでグラデーションを生成します。その後グラデーションの切り替わる位置を調整して,コードを取得できます。使える色は限定されていますが,そこがシンプルでいいところだと思います。

作った人はユーザーインターフェイスデザイナーとのことで,確かにインターフェイスが非常によくできています。直感的に使えて,操作に対する反応やちょっとした動きなどのセンスが良く,とはいえ主張しすぎないという理想的なインターフェイスデザインです。

図6 グラデーションのジェネレーター

図6 グラデーションのジェネレーター

今週の気になるWebネタ

アップルが新型Bluetoothキーボードとマウス,トラックパッドを発表。バッテリーは充電池化,充電端子はなんとLightning - Engadget Japanesehttp://japanese.engadget.com/2015/10/13/bluetooth-lightnin/

Appleが27インチiMacと21.5インチiMacを一新したタイミングで,新型のキーボードとマウス,トラックパッドを発表しました。

MacBook同様に感圧タッチに対応したトラックパッドはそのうち出るだろうと思われていましたし,充電式への要望も多かったはずですので,やっとで本来あるべきアクセサリが出揃ったという感じでしょう。

ちなみにわたしはキーボードの右側にマウス,左横にトラックパッドを置いています。右手でコップを持ちながら左手でスクロールといったことができて結構便利です。拡大したい時は左手でピンチアウトすればいいというのも重宝しています。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入