スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。

ライブドアは、ポータルサイト「livedoor」のデザインとインタフェースをリニューアルし、iPhoneやAndroid端末などのスマートフォン向けに最適化した。 今回のリニューアルでは、トップページに「おすすめサービス枠」「写真付きニュース枠」「おすすめメディア」の3つの枠を新設し、ほかのサービスやメディアへスムーズにアクセスできるようになった。「livedoor Blog」と「livedoor ニュース」では、「ブログトピックス」と「写真付きニュース枠」をそれぞれ追加し、読み物のボリュームも増加している。 livedoorへのアクセスは http://www.livedoor.com/ から。

スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です！ 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの

ここ数年でよく耳にするようになった「スマートフォン」という言葉。スマートフォンとは、ひとことで言うと、コンピューターとしての機能を搭載した携帯電話端末のことである。 英国の市場調査会社であるCanalysの、2008年第3四半期（7-9月期）における世界スマートフォン市場報告書によると、出荷台数は前年同期比約28％増であるなど、市場は爆発的に成長している。 2008年9月、米国ではGoogle Android対応機の第1弾である「T-Mobile G1」が発売され、ますますスマートフォン市場からは目を離せない状況になっている。 2008年10月には、イー･モバイルからWindows Mobile搭載の端末「S21HT」が発表され話題となっている。TVCMなどで目にした方も多いと思うが、画面全体がタッチパネルとなっていて、非常にカッティングエッジなHTCの携帯電話端末だ。 最もよく知られるス

ディップは8月30日、同社が運営するアルバイト求人情報サイト「バイトルドットコム」をiPhoneに対応させるとともに、iPhone向けアプリ「バイトル」の提供を開始した。 バイトルドットコム for iPhoneは、PC向けバイトルドットコムと同等の情報を掲載するiPhoneサイト。エリア、沿線・駅、職種、特徴、フリーワードからアルバイト情報を検索でき、現在地から近い順に仕事を地図表示する機能や、応募状況をリアルタイムで把握できる「応募進捗バロメーター」などの機能を利用できる。あらかじめプロフィールを登録すれば、応募時にはプロフィールを呼び出すだけで応募が可能だ。 同社は今後、仕事情報を動画で視聴できる機能も搭載する予定。アプリはApp Storeから無料でダウンロードできる。

「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、

Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ

IMJモバイルのモバイルユーザビリティ研究所は23日、「iPhone専用サイトにおけるユーザビリティ調査」の結果を公表した。調査期間は2010年7月27日～28日、有効回答数は618名。 ふだんiPhoneを利用しているユーザーに実際にデモサイトをiPhoneで見てもらい、iPhone専用サイトの使いやすさを中心に調査を行った。 まずiPhoneユーザーにWebを閲覧する際に利用する指を尋ねたところ、「もち手じゃない人差し指」「もち手親指」が多く、利用する際の場所は「指先」でタッチしていることが判明した。男女別に見ると、男性が「もち手じゃない人差し指」と「もち手親指」で操作する人がほぼ半数ずつ。一方で、女性は「もち手じゃない人差し指」で操作している人が約60％と「もち手親指」より多い結果となった。 iPhoneサイトを閲覧して不便だと思う点を尋ねたところ、「1画面での情報量が少ない」（28