memocarilog

4/18発売の Web Designing: 2015年5月号 の特集「スマホ時代のUI設計」にてサンプル作成と記事の執筆をさせて頂きました。

今月の特集は、「スマホ時代のUI設計 準備OK？ モバイルフレンドリーなサイトのための技術と実装」とのタイトル通り、モバイルフレンドリーの考え方から、モバイルフレンドリーに使えるさまざまなUIパーツの実装を、サンプルと共に解説していくという内容となっています。

• 【Introduction】「モバイルフレンドリー」は誰のために？
• Layout＿
  3デバイス個別対応グリッドシステム
• Menu＿
  画面の狭さを解決するナビゲーションドロワー / 画像を使ったナビゲーションドロワー / サイドからのメニューのスライドイン / スマホにも対応したドロップダウンメニュー / table-layoutで作るフレキシブルなグローバルナビ　ほか
• Button＿
  スマホでもタップした実感のあるボタン / タップで飛び出すシェアボタン
• Text＿
  セレクトボックスでオートコンプリートを実現 / フォームパーツをリスト化してスムーズに選択 / テキスト要素をレスポンシブ化 / タッチデバイスにも対応したツールチップ
• 【Column】「スマホ時代」のアクセス解析の実際
• Table＿
  CSSだけでできるレスポンシブ対応テーブル / CSSだけでできるスワイプ可能なレスポンシブ対応テーブル / jQueryでつくるスワイプ可能なレスポンシブ対応テーブル　ほか
• Image＿
  デバイスに依存しないSVG画像を使おう / 「ギャップレスレスポンシブ」テクニック
• Video＿
  モバイルフレンドリーな動画コントローラー / コンテンツ配信を最適化しよう / Animation＿Canvasで背景アニメーション / CSSによる背景のループアニメーション
• etc.＿
  タップしたときの「押した感」インタラクション / CSSだけでできるレスポンシブ対応のページナビゲーション / 視認しやすくて押しやすいチェックボックス / スマートフォンでも「触れる」スクロールバーUI

Web Designing: 2015年5月号

私はこの中で、以下の4パーツのサンプル作成と執筆を担当させて頂きました。

モバイル対応に注目が高まる今、とってもタイムリーな特集です。たくさんのテクニックが紹介されているので、この号だけでもかなり実装アイデアの引き出しを増やせるのではないかなと思います。ご興味ある方は是非読んでみてくださいね。Web Designing Kindle版もありますよ。