CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ（9）『ケーススタディ：iOS版CodeGrid 設計の裏側』徳田 和規さん

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、徳田 和規さん（ピクセルグリッド）の『ケーススタディ：iOS版CodeGrid 設計の裏側』セッションのスライドなどを公開します。

• スライド

iOS版CodeGrid設計の裏側を担当した徳田です。
当日はご静聴いただきありがとうございました。

■CodeGridについての捕捉

CodeGridについて、ご存知ない方が多数いらっしゃったようでCodeGridについての説明が少なかったとのご意見をいくつかいただきました。当サービスについては、オフィシャルサイトがありますのでこちらをご覧下さい。

• CodeGrid - フロントエンドに関わる人々のガイド

サイトの補足を少ししておきます。

CodeGridはフロントエンドに関わる人々のためのガイドとあるようにフロントエンド（HTML、CSS、JavaScriptなどの技術や、それに関連した周辺技術）の最新動向や使い方などの記事を月4回木曜日にメールマガジンとして配信しています。

配信コンテンツ一覧はWebアプリのサイトで確認することができます。

https://app.codegrid.net
（購読されていない方は、記事の一覧と概要までをご確認いただけます。）

例えば、

* SassとCSS設計
* 現場で使えるGrunt入門
* Webアプリ構築のためのBackbone.js入門
* おすすめライブラリつまみ食い

など、さまざまな連載があります。また、読み物として弊社代表の「ピクセルグリッドの仕事術」という連載もあります。

それぞれの記事は、弊社（ピクセルグリッド）メンバーが制作時に身につけた知識を元に執筆しており、文章の編集はエンジニアではなく、専門の編集者が行っています。

■当日のセッションについての補足

当日のセッションでは、当アプリのiOS版開発に関する設計の裏側として、いくつかポイントになった点を紹介しました。

対象にしている端末は、iOS6以上のiPhone、iPadです。動作確認はiOS 5以上で行っていますが、快適に閲覧できるのはiOS 6以上です。

* iOS Safariのフルスクリーンモードの扱い
* ヘッダーナビゲーション
* 固定UIとスクロール
* シリーズやタグページ
* Table of Contents（目次）メニュー
* PC版とのサンプルの扱いの違い
* ソーシャルボタン

当日のセッションでも言われていましたが、スマートフォン向けにサイトを作る場合は、できることとできないことを把握することが大切です。

スマートフォン端末では、パフォーマンスもPCとは大きく異なり、動作が遅くなることが多いため、ひとつの機能の採用にも、それは本当に必要かどうか、PC以上に十分吟味する必要があるでしょう。

当セッションの内容は、基本iOS6以上（動作確認はiOS5以上）の端末向けと、かなり限られた環境下での話でしたので、限定的な話になってしまいましたが、どこか制作時のヒントになれるようなポイントがあれば幸いです。

当日は、長い時間おつかれさまでした。
これからもCodeGridをよろしくお願いいたします。