週刊Webテク通信

2015年2月第4週号1位は、レスポンシブWebデザインでのナビゲーションのトレンド、気になるネタは、Google、子ども「YouTube Kids」アプリをiOS/Androidでリリース

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

1. Responsive Navigation in 2015: 5 Latest Trends to Followhttp://www.motocms.com/blog/web-design/responsive-navigation-2015-trends/

レスポンシブWebデザインでのナビゲーションのトレンドを紹介しています。

  1. 通常状態では隠れている開閉メニュー(ハンバーガーメニュー)
  2. 開閉メニュー
  3. セレクトメニュー(フォームのセレクト要素を使ったメニュー)
  4. ウィンドウサイズに合わせてリサイズされるメニュー

1と2は基本的には同じもので、スペースを有効に使うために普段は隠れているメニューが、ボタンクリックなどにより出現するというものです。2の例で取り上げられているサイトは、スマートフォンサイズではハンバーガーメニューになっています。PCサイズの時に、メニューが表示されているか、メニューを開くボタンだけがあるかの違いのようです。

4の実例サイトはシンプルな水平ナビゲーションバーで、横幅に合わせて文字サイズが可変します。スクロールしてもメニューは残り続けるタイプのもので、最近この手のナビゲーションバーはよく見かけますね。

図1 レスポンシブWebデザインでのナビゲーションのトレンド
図1 レスポンシブWebデザインでのナビゲーションのトレンド

2. Top-Tips for Designing a Clean Yet Colorful Website | NOUPEhttp://www.noupe.com/design/opposites-attract-tips-for-designing-a-clean-yet-colorful-website-88829.html

クリーンながらカラフルなWebサイトをデザインするヒント集です。カラフルながらもすっきりしたデザインの実例が、以下の項目毎に紹介されています。

  1. 白ではない「ホワイトスペース」
  2. 的確ではっきりした色
  3. 大きく目立つ画像
  4. 鮮明な色を使ったカラースキーム
  5. 文字の大きさに階層構造を
  6. シンプルなナビゲーション
  7. 完璧に揃える
図2 クリーンながらカラフルなWebサイトをデザインするヒント
図2 クリーンながらカラフルなWebサイトをデザインするヒント

3. Saving time in Sketch ? Mediumhttps://medium.com/@lorenzvs/saving-time-in-sketch-7042142c8a8e

Web向けグラフィックス作成ソフト・Sketchを使った、時間短縮に繋がるデザインテクニックを6つ紹介しています。

レイヤーの並べ替えや、まとめて連番を振ってレイヤー名を変更する方法などが掲載されていました。

図3 Sketchの時間短縮テクニックいろいろ
図3 Sketchの時間短縮テクニックいろいろ

4. Beautiful Examples of Clean Sitemap Mapshttp://designposts.net/beautiful-examples-of-clean-sitemap-maps/

すっきりきれいなサイトマップの実例集です。Webサイトの制作スタッフやクライアント向けの、プリントアウトを目的としたサイトマップ/フローチャート/画面遷移図が多数紹介されています。

Dribbbleからセレクトしたようで、タイトル部分がDribbbleへのリンクとなっています。Dribbble上ではもっと大きな画像を見られますし、Illustrator形式などのファイルをダウンロードできるものもあります。

図4 サイトマップの実例集です
図4 サイトマップの実例集です

5. Free CMS Alternatives to WordPress - The Hivehttp://thehive.beewits.com/free-cms-alternatives-to-wordpress/

WordPress以外のCMSをまとめた記事です。日本とアメリカでは状況がかなり違っているCMS界ですが、参考になると思います。

JoomlaとDrupalは日本でもよく知られてはいますが、使っている人は少ない印象があります。Webサービスとして提供しているBlogger、Tumblrも有名ながら、日本ではマイナーな存在ですね。

図5 WordPress以外のCMSいろいろ
図5 WordPress以外のCMSいろいろ

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

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

11 Free Tools: Every Type of Gif Creator You Will Ever Needhttp://www.designzzz.com/free-tools-gif-creator/

今回は、GIFアニメーションを作れるツールをまとめた記事を紹介します。Webサービスのほか、モバイルアプリ、デスクトップアプリケーションも掲載されていました。

動画や複数枚の画像を元にGIFアニメを作れるのはもちろん、YouTube動画やWebカメラからも作れるWebサービスもあります。IMGflipというWebサービスは、GIFアニメだけでなく、画像にキャプションを入れたり、円グラフを作ることも可能です。

静止画の一部だけが動く「シネマグラフ」を作るアプリも紹介されています。このシネマグラフは、Webサイトのアクセントに使うと効果的だと思います。

図6 GIFアニメーションを作れるツールをまとめた記事
図6 GIFアニメーションを作れるツールをまとめた記事

おすすめ記事

記事・ニュース一覧