Web Designing 5月号でサンプル作成と記事の執筆をさせて頂きました

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 5付月号の特集内容

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です