週刊Webテク通信

2014年2月第2週号 1位は,コンパクトで洗練されたサイドメニューの事例を多数紹介,気になるネタは,Facebookが10周年 ザッカーバーグCEOのメッセージに30万「いいね!」

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

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

1. Compact and Elegant Side Menus in Website Designs - Designmodohttp://designmodo.com/side-menus-websites/

コンパクトで洗練されたサイドメニューの事例を多数紹介した記事です。

サイドメニューはだいたい以下のような歴史を持つそうです。

  • もともとはアプリケーションのインターフェイスとして生まれた
  • FacebookやTwitterなどソーシャルメディアのWebサイトで使われて一般的となった
  • モバイルアプリで使われるようになった
  • 今ではWebサイト全般で用いられている

1ページ完結サイトやパララックススクロールのサイトとの相性がいいところも,普及している理由として挙げられていました。

事例紹介を見ると,最初からメニューが表示されているものと,クリックすると現れるタイプのものとがあります。また,画面全体がメニューとともにスライドするオフキャンバスと呼ばれるタイプのものと,メニューが画面の上にかぶって表示されるものとがありました。

図1 サイドメニューの事例を多数紹介

図1 サイドメニューの事例を多数紹介

2. Resources for designing high converting landing page | Ishu'sBloghttp://www.ishu.com.np/resources-for-designing-high-converting-landing-pages/

効果的なランディングページのデザインに役立つインフォグラフィックスがまとめてあります。

ランディングページの各構成要素について細かく解説しているものなど,役に立ちそうなインフォグラフィックスが8個紹介されていました。

図2 効果的なランディングページのデザインに役立つインフォグラフィックスいろいろ

図2 効果的なランディングページのデザインに役立つインフォグラフィックスいろいろ

3. 20 Detailed UI Concept Sketches + Ready Designs For Your Inspirationhttp://www.hongkiat.com/blog/detailed-ui-sketches-designs/

モバイルアプリのUIの手書きスケッチと,実際の完成作とを並べて紹介しています。

立体感も含め,結構細かく表現されている手書きスケッチが多くて驚きました。

図3 モバイルアプリのUIの手書きスケッチを多数紹介

図3 モバイルアプリのUIの手書きスケッチを多数紹介

4. Responsive Website Designs | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2014/01/responsive-website-design/

レスポンシブWebデザインのサイトのギャラリーです。あまりこの手のギャラリー記事で見かけなかったサイトが多く,フレッシュな顔ぶれのようです。

最近流行のレスポンシブかつシングルページで,スクロールで見せていくタイプのサイトが多いようです。

図4 レスポンシブWebデザインのサイトのギャラリー

図4 レスポンシブWebデザインのサイトのギャラリー

5. Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design / HTML & CSS / Markup languages / Programming languages / Articles - BASICusehttp://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design

YouTube動画やHTML5ビデオを,レスポンシブに埋め込むためのCSSを紹介した記事です。

幅を100%に指定して,動画の縦横比から計算した高さ分のpaddingをパーセントで指定するのがポイントです。そのため,4:3と16:9では指定が違うところが注意点です。

図5 レスポンシブにYouTube動画を埋め込むためのCSS

図5 レスポンシブにYouTube動画を埋め込むためのCSS

そのほか,最近の記事の中から,必見の日本語Webテク記事を3つ紹介します。

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

色色 [:iroiro]http://synthsky.com/iroiro/

「色色」は,入力した言葉を元にカラーパレットを生成できるWebサービスです。その言葉に最も合うカラーパレットが作られるそうです。

仕組みとしては,入力された言葉で画像検索し,見つけた画像を分析して色を抽出しているとのこと。なので,どんな言葉を入れても,カラーパレットが生成されます。

「Export」メニューがあるのでカラーパレットとして書き出せるのかと思ったのですが,Photoshopなどのパレットとしては書き出せませんでした。パワーポイントのカラーパレット形式では書き出せるようです。

作ったカラーパレット(といっても検索しただけですが)のURLは共有でき,HTML埋め込みコードも用意されています。作ったカラーパレットから服のコーディネートをする機能も,遊び心があって面白いですね。

図6 入力した言葉を元にカラーパレットを生成できるサービス

図6 入力した言葉を元にカラーパレットを生成できるサービス

今週の気になるWebネタ

Facebookが10周年 ザッカーバーグCEOのメッセージに30万「いいね!」 - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1402/04/news129.html

2004年2月4日にスタートしたというFacebookが10周年を迎えました。それを記念して,⁠過去の出来事(A Look Back)⁠という,自分が過去に投稿した写真や動画から「いいね!」が多く付いたものをまとめて1分の動画を作れるサービスが提供されています。

Facebook上では一時期ニュースフィード上が「過去の出来事」のムービーだらけになるほど流行っていました。リリース当初はおまかせで作られるだけだったのですが,その後編集ツールができて使用する写真を選べるようになったそうです。よくできているので,今後もFacebookの1機能として残るんじゃないかとも言われています。

一方,Flickrも同じく2004年の2月にスタートしていたそうで,この2つのサービスは同い年だったんですね。

Flickrの方は2005年の3月にYahooに買収されたわけですが,どちらのサービスも10年続いたことはすばらしいことですし,今後も継続していってほしいですね。Flickrは日本語化するともっと日本でも人気が出ると思うのですが,どうなんでしょう? 10年経ってもそういう話は全然出てこないので,あまり期待できないとは思いますが…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入