週刊Webテク通信

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

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

ネットで見かけた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アニメーションを作れるツールをまとめた記事

今週の気になるWebネタ

Google,子ども用「YouTube Kids」アプリをiOS/Androidでリリース - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1502/24/news041.html

子供向けのYouTubeアプリがGoogleからリリースされました。米国のみの提供ですが,子供向けコンテンツの選別や検索用NGワードの設定などが必要なので,ローカライズには時間がかかりそうです。

Twitter傘下の動画共有サービスVineは,一足先にVine Kidsという同様のアプリをリリースしています。なお,このVine Kidsは子供向けコンテンツを閲覧できるだけで,投稿機能はありません。英語メニュー&英語コンテンツですが,日本でもアプリを入手できます。

スマホ時代は,⁠キッズケータイ」「らくらくホン」的なものはアプリでカスタマイズするのがいいと思っています。これら子供向けアプリは,今後キッズアプリやシニアアプリが増えていくきっかけとなるんじゃないでしょうか。Googleは,ウェブ検索,Chromeブラウザーの子供向けバージョンも開発しているようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入