noteで書く[PR]スマートフォン対応サイトの制作には、PCサイトや携帯サイトとは異なるノウハウがある。注意すべきなのが、タッチ操作という新しいインターフェイスを採用している点だ。今後さらに急成長するスマートフォンにいち早く対応するために、チェックしておくべきポイントを紹介する。MCPC)個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話(フィーチャーフォン)対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が本格化してくるだろう。2011』(MCPC監修、インプレスR&D発行)によると、2011年3月末(2010年度)の契約数は、前年の497万契約から63%増の810万契約となる見通しだ。調査によると、契約数は年平均40%以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。した調査からも、今からサイトをスマートフォンに対応しておくことが決して早くないことがわかるだろう。スマートフォン対応の基本はPCサイトからひとくちにスマートフォン対応といってもいくつかの方法がある。GoogleやYahoo!のようにサイト全体をスマートフォン専用サイトとする例もあれば、ぐるなびのようにトップページなど一部はPCサイトを表示しつつも、専用サイトやアプリをあわせて提供するといった方法もある。したなかで、最も簡単なのは、既存のPCサイトをベースに最適化していくことだ。専用のコンテンツを作るのでなければ、必要な工数や予算的にも一番の近道になるため、ここではPCサイトをベースにしたスマートフォン対応の方法を解説する。新規で専用サイトを制作するにしても、スマートフォンはフルブラウザを搭載しているので、実はPCサイト制作と共通する部分は多い。キャリアや端末ごとの独自仕様にあわせる必要があった、従来の携帯サイトの対応に比べれば、スマートフォン対応はさほど大変ではない。現在、市場の中心であるiPhoneのSafariやAndroid端末の標準ブラウザでは、WebKitと呼ばれるブラウザのレンダリングエンジンを搭載しており、HTML5やCSS3といった最新技術への対応が進んでいることも制作には有利だ。通信環境や画面サイズの近い携帯サイトをベースに制作することも考えられるが、絵文字や罫線による装飾、アクセスキーによるナビゲーションを前提とした携帯サイトから、タッチパネル操作のスマートフォンへ最適化するのは手間がかかるだろう。オススメはPCサイトをベースにするやり方だ。サイドバーやメニューは絞ってシンプルにするPC並みの表示能力を持っていても、スマートフォンの通信環境は3G回線が中心であり、PCと同様のコンテンツを提供したのでは、通信に必要なデータ量が多く、重く感じてしまう。メニューやボタンは画像だけでなく、CSSのデザインを使い、データ量をできるだけ軽くしていこう。画面がさほど広くないので、携帯サイトと同様に一画面の表示要素はなるべくシンプルにする必要がある。フッターやサイドバーなど、PCサイトでは表示していたナビゲーションを思い切ってなくし、必要なものだけに絞ることも大切だ。ファーストビューを重視し、1ページの要素を軽くするなど、携帯サイトのユーザビリティと共通する点も意識しておくといいだろう。リンクだと一目でわかるようにする新しい課題もいくつかある。スマートフォン対応で考えなくてはならないのが、インターフェイスがタッチパネルだということだ。基本的にスマートフォンは画面に直接手を触れて操作するため、PCサイトと異なりマウスポインタが表示されず、ポインタをリンクや画像に重ねた際にアイコンを変更させるといった、ロールオーバー(マウスオーバー)による表現がほぼ不可能だ。PCサイトでは、リンクの下線を非表示にして、マウスを重ねた場合に下線を表示したり色を変えたりすることも多いが、こうした動作はできないため、一目でリンクだとわかるような工夫が必要になる。JAPANのスマートフォンサイト。リンクであることをわかりやすくするためアイコンが追加されている。タッチしやすいように、テキストだけでなく余白部分とあわせてリンクしているのもポイント。タッチ操作に最適な行間や余白をとる携帯サイトでは、改行や1ピクセル画像を使って行間や余白を調整するノウハウもあるが、スマートフォン対応では、指によるタッチに誤操作がないように、文字や画像の行間も見直さなければいけない。実際に使ってみるとわかることだが、親指や両手での操作など人によってさまざまな使い方があるため、指でメニューが隠れて押しづらくないか、間違えて別のリンクを押してしまわないかなど、テストしてみることも大切だ。リキッド(可変幅)でデザインするスマートフォンの画面は携帯電話のように固定ではなく、本体を縦にしたり横にしたりして使える。ところが、本体の向きを変えると画面幅が大きく変わるため、縦長の画面では表示に問題がなくても、横画面では見づらくなってしまうことがある。縦画面では最適化されていた文章を横画面にすると、1行が長くなり見づらくなってしまうことが考えられる。4を例にとれば(960px×640px)、画面幅は横向きにすると320px広がることになり、固定幅でデザインすると余白ができてしまう。そのため、スマートフォン対応サイトではリキッド(可変幅)デザインにするのが基本になる。端末ごとの画面サイズもあるが、スマートフォン対応を考える場合は、今のコンテンツを横画面にしたときにどのように見えるのか、デザインが崩れていないかあわせてチェックしておこう。横画面にすると1行が長くなるので、読みづらくなってしまうことがある。写真やグラデーションを使ったデザインなども注意が必要。PCでは画面幅を固定にしているサイトも多いが、スマートフォンサイトは可変幅のデザインが基本になる。アニメgifやアプリ連携で対応iPhoneではFlashを使えない。そのため、既存のFlashは何らかの代替する手段が必要になる。動画については、現状のPCサイトのほとんどがFlashを活用していると思うが、iPhoneに対応させるには、動画コンテンツの変換作業が必要だ。Android端末もOSのバージョンによっては再生ができない。可能であればアニメーションgifで代用したり、サイト内で完結させようとせずに、動画再生アプリケーションと連携して配信したりすることを考えよう。YouTubeやニコニコ動画など、スマートフォンに対応する動画配信サイトへ動画をアップロードして誘導するのも1つの方法だ。製品・サービスを追加するたびに、複数の端末にあわせた素材を用意するのは工数がかかるが、現在はスマートフォン向けの変換ツールも多数登場してきているので、こうしたサービスを利用するのがいいだろう。HTML5+CSS3を積極的に活用する技術的な要素では、HTML5やCSS3の習得がカギになってくる。できるだけサイトを軽くしながら、ナビゲーションや見出しを強調するなど、表現力を高めるためにはCSS3の活用が有効だ。角丸のデザインやグラデーションなどは、PC向けサイトでは画像を使わなければ実現できなかったが、CSS3ならばCSS指定を数行書くだけで実現できる。PCサイトのようにIE6ユーザーに対応する必要もないので、新しい技術を使わない理由はない。入力フォームのコントロールなど、以前はJavaScriptで対応していた機能をHTML5で実現できたりもするので、将来性を考えてHTML5+CSS3による制作を進めるといいだろう。前述のリキッドデザインへの対応は、CSS3で追加されたスタイル(media-query)やJavaScriptを使って閲覧環境に応じて表示を変更することでも対応できる。スマートフォンのブラウザは、JavaScriptにも標準対応しているため、JavaScriptを使った折りたたみ式のメニューなど、縦長の画面での操作性を快適にすることにも利用できる。携帯サイトでは、Flashを使ったナビゲーションを採用しているケースも多いが、スマートフォンならではの対応策といえる。新しい技術への対応が進んでいるとはいえ万能ではなく、まだ端末ごとに動作がことなる部分もあるため、携帯サイトと同様に実機での確認もかかせない。そのあたりは、携帯サイトほどではないが苦労するところだろう。市場のトレンドにあわせ、既存のPCサイトや携帯電話サイトをスマートフォン向けに変換するソリューションが多数登場してきているが、CMSでもスマートフォン対応が進んできている。CMSで対応するメリットとしては、既存サイトとあわせて一元管理できること、承認フローなどをそのまま利用できることがあげられる。PUBLIS」シリーズも、PCサイトと携帯サイトに加え、スマートフォン対応を進める製品の1つだ。スマートフォン対応といっても、単純にPCサイトのデザインやコンテンツをそのまま持ってきただけでは十分とはいえない。前述したようにタッチパネルに最適化することが重要になる。PUBLISの「スマートフォンサイト機能」では、スマートフォンのタッチ操作に最適化したスタイルのナビゲーションを自動的に生成できるのが特長だ。PUBLISでスマートフォン対応する際の魅力だ。PUBLISは、iPadなどのタブレット端末にも対応する。PUBLISで自動的に最適化された問い合わせフォームとログインフォーム。PUBLISで自動的に最適化されたメニューやナビゲーション。PUBLISの場合、1つのコンテンツからPC、携帯電話、スマートフォン、各デバイスに最適化したサイトをワンソースで生成できる。した一元管理を実現できることは、CMSの大きなメリットだ。各サイトのコンテンツは自動的に同期できるのはもちろん、個別に編集することもできるため、PCサイトでは動画や音声などのマルチメディアコンテンツを利用した詳細情報を掲載し、モバイル端末の携帯電話とスマートフォンでは、お知らせなどの情報は同期させつつも、特集はダイジェスト版にするなど、柔軟な対応が可能だ。デザインが崩れていないか、端末ごとのチェックも欠かせないが、同社では独自の開発部隊をもち、新機種が発売となった際には1か月以内で各端末に対応した機能をリリースするため、端末に合わせた仕様の確認といった手間を削減できる。空いたリソースは、コンテンツやアプリ開発などの企画に有効活用できるだろう。急成長するスマートフォン市場において、今後、続々と登場してくるだろう新たなデバイスや技術にあわせ、人の手でコンテンツを対応させていくのは現実的ではなく、PDCAサイクルを回し、戦略的にWebを活用するためにはCMSの活用が欠かせない。Web戦略において必須とされているCMSだが、これから導入を検討するという企業も多いだろう。今や企業が管理すべきWebコンテンツはPCのWebサイトだけに止まらず、これからCMSの導入や乗り換えを検討するならば、スマートフォン対応を含め、コンテンツを一元管理できる製品を検討すべきだ。PUBLISは、CMS選定において注目すべき製品となるはずだ。PUBLIS」は、さまざまな機能をもったブロックを組み合わせてコンテンツ管理を行うCMS。ページレイアウト構成が可能。コピーの他、エリア単位に継承を行うことができ、ページ編集の生産性を飛躍的に向上させます。ブロック単位のコンテンツ管理はコンテンツの作成・編集を簡単にするだけではなく、外部システムとの連携を容易にしており、将来的にWebサイトを運営成長させていくなかで、柔軟に対応していくことを可能にする。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!私は変人コレクター。CEM」の提供を開始LINEのマーケ活用術――ナーチャリングからリピーター醸成まで解説するセミナー2/20開催MaaSが普及したら「自家用車を手放すことを検討する」48%【アクセンチュア調べ】2019年にもっとも注視されたテレビCMは、クボタ「壁がある。2/19(水)@ステーションコンファレンス東京リピーターを呼び込む「究極の集客方法」。リピーターを呼び込む「究極の集客方法」。2019年12月すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。