話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近

この記事では、ASP.NET MVC5のひな形ページで使用されているBootstrapというフレームワークについて紹介します。Bootstrapは、CSS3ベースのオープンソースで、デザインが苦手なエンジニアでも見栄えの良いページを作ることができる魅力的なフレームワークです。 前編にあたる本稿では、「Bootstrapの特長」「ASP.NET MVCで生成されるひな形」「Bootstrapの仕組みとUIコンポーネントの理解」について紹介します。Bootstrapを学ぶことで、よりリッチなサイトを簡単に作れるようになります。 Bootstrapの特長 Bootstrapは、元TwitterのMark Otto氏とJacob Thornton氏らによって開発されているオープンソース（MITライセンス）です。HTML5、CSS3、jQueryといった技術をベースとしており、最近ではフラットデザイ

iOS 7へのアップグレードに合わせてさまざまなアプリがインターフェースや機能の変更を行っていますが、これからウェブサイトやアプリをフラットデザインにしよう、という時に便利なUIキットが「Flat Rounded Square UI Kit」です。ブログのデザインや各種ボタン・アイコン・グラフ・テキストボックスなどが統一感のある落ち着いたデザインで作られており、ファイルはPSD形式、JPG形式、ACO形式の3種類、ライセンス・フリーなので商用・非商用を問わず自由に使用することができます。 Flat Rounded Square UI Kit http://www.webappers.com/flat-ui-kit/ まずはウェブサイトやソフトウェアなどで使用するナビゲーション・ボタンいろいろ。紺色を基調としており、効果的に赤や水色が使用されています。 ノーマルのボタンはバリエーションのある

マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWebデザイン レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。 マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの

iOS 7やWindows 8も採用した「フラットデザイン」。実際にフラットデザインを実現するにはどうすればいいのだろうか。 1分－フラットデザインとは何なのか アップルの開発者向け年次イベント「Worldwide Developers Conference（WWDC）」が米国時間6月10日に開幕し、基調講演で同社モバイルOSの次期版「iOS 7」が発表された。見た目の印象が従来版からガラリと変わっている。これは「フラットデザイン」という手法を採用したからだ。 フラットデザインとは、簡単にいうと、グラデーションを利用しない非常にのっぺりとしたデザインのことだ。

アップルは6月10日、開発者向けカンファレンス“WWDC 2013”の基調講演において、iOSの最新版となる『iOS7』を発表しました。このiOS7では、一見するとWindows PhoneやWindows8のMetroやModern UIと似た、"フラットデザイン"を採用したことが話題となっています。 果たしてこのデザインは、MetroやModern UIを“参考にした”ものなのでしょうか？ 今回は、UIデザインにおいて平面的なデザインがもたらす意味について、考察してみたいと思います。 ■フラットデザインの基本的な問題点とは これまでアップルのUIデザインは、"Skeuomorphism"デザインと呼ばれる、ディスプレー上にリアルな物体を再現するデザイン手法が主流となっていました。たとえばアイコンには写実的な表現を多用し、ボタンやスライダーといった個々のUI要素も立体的にデザインされてい

ピクスタは9日、同社が運営する写真素材販売サイト「PIXTA」にて、新たに動画素材の無料提供を開始したと発表した。 本サイトでは、2011年2月より写真・イラスト素材を週替りで無料提供しているが、今回これに加えて新たに動画素材の無料提供も開始。今後は写真・イラスト素材数点を毎週、動画素材2点を月2回のペースで提供していくという。 これらの無料素材は、PIXTAに無料会員登録しているユーザーであれば誰でもダウンロード可能。同サイトで販売されている他の素材と同様に、利用規約の範囲内でWebサイト(商用含む)、広告、商品デザイン、TV等さまざまな用途に利用できる。

配布元である「Web Icon Set」からの自薦によるタレコミによると、新しく無料で商用利用OKなアイコンセット「Simplicity Vector Icon Set」の配布を始めたとのことで、どれもこれも非常に使い勝手の良さそうで実用的なアイコンがそろっています。 Simplicity Vector Icon Set | Web Icon Set http://www.webiconset.com/simplicity-vector-icon-set/ ファイル形式はPSDとPNGの2種類で、PSD形式の方はベクター形式のようなパスとして自由自在に拡大縮小が可能、PNG形式の方は背景が透過処理済みで16・24・32・64・128・256・512ピクセルの各サイズがそろっています。 中に含まれているアイコン一覧はこんな感じ。 ダウンロードするには上記配布ページにアクセスし、下部にある「D

連載インデックス 「HTML5“とか”アプリ開発入門」 JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基本を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします。 Webの3つの問題を解決する「HTML5」とは何なのか HTML5“とか”アプリ開発入門（1）　最近よく目にする「HTML5」という言葉。JavaScirptのAPIやCSS3、SVGなどを含め、全体的な概要と、その意義をお伝えします

Androidの勢いは増すばかりだ。米IDCが3月29日に発表した市場予測によると、2011年のスマートフォン出荷台数は前年比5割増しになる見込みで、Androidのシェアはそのうち4割に達するという（関連記事）。iPhone/iPadはもちろん、長い間スマートフォン市場をけん引してきたSymbianも抜き、トップに立つ見込みである。 その一方で、かねてから言われてきた“Androidの混在問題”が、いよいよややこしくなってきた。Androidの混在は、大きく二つある。一つは、バージョンの混在。もう一つは、ディスプレイの混在だ。 バージョンの混在 Androidは、バージョンアップのペースが速い。国内初のAndroidスマートフォン「HT-03A」に当初搭載された「1.5」がリリースされたのが、2009年4月。その後、「1.6」（2009年9月）、「2.1」（2010年1月）、「2.2」（

スマートフォンアプリデザインに役立つ 基礎のまとめ！：一撃デザインの種明かし（14）（1/4 ページ） 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhone／Androidともに展開するものが増えてきました。 そういった中で、本稿ではスマートフォンアプリのデザインのコツをまとめてみます！ iPhone／Androidともに展開しているアプリ3例 まずは、iPhone、Androidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中