週刊Webテク通信

2012年1月第4週号 1位は,迅速にWebサイトを作成するためのフレームワーク「HTML KickStart」,気になるネタは,Apple,「iBooks 2」「iBooks Author」「iTunes U」アプリ発表

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2012年1月16日~2012年1月22日の間に見つけた記事のベスト5です。

1. HTML KickStart - Ultra?Lean HTML Building Blocks for Rapid Website Production - KickStart your Website Production - 99Lime.comhttp://www.99lime.com/

迅速にWebサイトを作成するためのラピッドプロトタイピング用のフレームワークです。

Webサイトを制作する際に,まずはPhotoshopなどでデザインしていくのではなく,最初からブラウザ上で動くプロトタイプをHTMLで作るという動きが広まっています。迅速に試作するということで,ラピッドプロトタイピング(Rapid Prototyping)と呼ばれています。

ラピッドプロトタイピングに使えるフレームワークはFoundation(レスポンシブWebデザイン対応)⁠Bootstrap(Twitterが提供)など各種登場しており,このHTML KickStartもそのうちの一つというわけです。

HTML KickStartは,グリッドやタブ,ボタンなど,この手のフレームワークに必要なものは押さえられており,ドロップダウンのメニューバーや,スライドショーも簡単に実装できるように用意されています。

もちろん本番のサイトにも,このフレームワークを利用することができます。フレームワークを使って素早くプロトタイプを作り,CSSなどを調整してデザインをブラッシュアップしてから本公開といった作業の流れが想定されています。

図1 迅速にWebサイトを作成するためのフレームワーク

図1 迅速にWebサイトを作成するためのフレームワーク

2. 10 Essential Sites for Designershttp://angelceballos.com/2012/01/10-essential-sites-for-designers/#.Tx0mdWO2_et

デザイナーのためのコミュニティサイトを10個紹介しています。Dribbbleのような作品ポートフォリオのサイトなど,インスピレーションのヒントになりそうなサイトが多数紹介されています。

Designmooはデザイン素材の投稿サイトで,アイコンやパターン,UIエレメントなどのフリー素材を探すことができます。

Dribbble,Designmooなどの作品をまとめて見られるVisual Heapというサイトもありました。

図2 デザイナーのためのコミュニティサイトいろいろ

図2 デザイナーのためのコミュニティサイトいろいろ

3. Building Websites and Browser Apps with jQuery Mobile: A Beginner’s Guidehttp://www.hongkiat.com/blog/build-websites-apps-jquery-mobile/

jQuery Mobileで,Webサイトやブラウザアプリを作るための初心者向けガイドです。

ヘッダやフッタのナビゲーションボタンや,サムネイルの付いたリストの作り方などが解説されています。

図3 jQuery Mobileの初心者向けガイド

図3 jQuery Mobileの初心者向けガイド

4. Dreamweaverのデザインビューを使い倒すために覚えてきたいこと | Webデザインのタネhttp://oshare.jugem.cc/?eid=767

Dreamweaverでデザインビューを使って作業するときのテクニックを紹介しています。デザインビューとコードビューをうまく使い分けて効率的に作業しましょうという内容です。

これからDreamweaverを始めるという新人さん用のテキストとしても,使えそうな記事ですね。

図4 Dreamweaverでデザインビューを使って作業するときのテクニック

図4 Dreamweaverでデザインビューを使って作業するときのテクニック

5. 16 Minimal Designed Websites That Will Boost Your Inspirationhttp://neatdesigns.net/16-minimal-designed-websites-that-will-boost-your-inspiration/

ミニマルデザインのWebサイトのギャラリーです。ミニマルといっても,凝った仕掛けのあるサイトばかりです。

スクロールに合わせてコンテンツが変化するなど,最近流行のスクロールを使った仕掛けが使われているサイトは,やはり印象に残りますね。

図5 ミニマルデザインのWebサイトのギャラリー

図5 ミニマルデザインのWebサイトのギャラリー

そのほか,先週の記事の中から,Web制作に役立つ素材を配布しているサイトの紹介記事です。

先週の気になるWebサービス

Gridpak - The Responsive grid generatorhttp://gridpak.com/

レスポンシブWebデザイン用のグリッドジェネレーターです。

カラム数とパディング,カラム間の空白の幅を指定できます。ブレイクポイントを設定することができるので,閲覧サイズに合わせてカラム数やパディング,空白の幅を指定できます。

グリッドが完成したあと,CSSなどのファイル類をダウンロードできます。グラフィックソフトでデザインする際に便利な画像ファイルと,JavaScriptやLessファイルなども同時に作られます。

図6 レスポンシブWebデザイン用のグリッドジェネレーター

図6 レスポンシブWebデザイン用のグリッドジェネレーター

今週の気になるWebネタ

電子書籍作成ツールまで無料:今度は“教科書を再発明”――Apple,「iBooks 2」「iBooks Author」「iTunes U」アプリ発表 - ITmedia +D PC USERhttp://plusd.itmedia.co.jp/pcuser/articles/1201/20/news017.html

Appleから電子書籍作成のためのMac用オーサリングツール「iBooks Author」が公開されました。電子教科書をターゲットに開発されたもので,動画や3Dオブジェクトを埋め込んだり,インタラクティブな仕掛けを入れることができます。閲覧するためのiOSアプリ・iBooksも2にバージョンアップされ,蛍光ペンでのハイライト機能やメモ書き機能なども追加されています。

PagesやKeynoteのような操作感で簡単に電子書籍を作れるということで,クリエイターの間でもiBooks Authorは注目の存在でしょう。一方で,iBooks Authorで作った本は,AppleのiBookstoreからしか販売できないことが話題となっています。

現状,日本からはiBookstoreで販売することもできないようです。日本語の本を作ることはでき,無料配布するのは問題ないようなので,日本でもまずはインディーズの本が続々登場するのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入