週刊Webテク通信

2011年8月第3週号 1位は,有名サイトを設計し直したコンセプトデザイン集,気になるネタは,“Tumblr”を利用した水野美紀さんの公式サイトに「かなり,やる」の声

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

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

1. 18 Cool Concept Designs (Facelift) of Notable Websiteshttp://www.hongkiat.com/blog/concept-design-facelift-notable-websites/

FacebookやYouTubeなどの有名サイトを設計し直したコンセプトデザインを紹介しています。

作品の多くは,クリエイター向けポートフォリオサイトに掲載されているものです。各画像からリンクされている元ページを見ると,実際に操作しているデモ動画や,原寸大の画像,細かい解説などが載っているものもあって,より楽しめます。

装飾を加えすぎることなく,すっきりと機能的にまとめた,最近のトレンドが詰まっているような作品ばかりです。Facebookは特に,デザイン的に不満の声が多いので,こんな感じになるといいのになぁと思ってしまいますね。

図1 有名サイトを設計し直したコンセプトデザインいろいろ

図1 有名サイトを設計し直したコンセプトデザインいろいろ

2. Bootstrap, from Twitterhttp://twitter.github.com/bootstrap/

Twitterが提供する,Webアプリケーションやサイトを作るためのツールキット「Bootstrap」が登場しました。

CSSを使ってデザインされた,グリッドシステム,文字指定,表組み,フォーム,ボタンなどを利用することができます。

この手のフレームワークはいろいろありますが,Twitterが提供しているということで,安心感がありますね。継続的なアップデートに期待したいと思います。

CSSを拡張するLessを使っていて,オリジナルの「.less」ファイルも公開されています。Lessを使うと,変数を使うなどして複雑なCSSの記述を簡単に行えるそうです。LessファイルはコンパイルしてCSSにする必要があるのですが,ここではJavaScript版のLessを使う方法が紹介されています。

図2 TwitterによるWebアプリケーションのためのツールキット

図2 TwitterによるWebアプリケーションのためのツールキット

3. スマフォサイトでよく見るパーツのコードサンプル集 | 07design.bloghttp://07design.net/blog/?p=477

スマートフォンサイトでよく使われるユーザーインターフェイスのコードを各種掲載しています。

HTMLとCSSでメニューやリストなどを実現するための記述が紹介されています。動きのあるものに関しては,JavaScript部分も掲載されているものもあります。

スクリプトを使って動きを付ける処理に関しては,スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろという記事も参考になると思います。

余談ですが,スマートフォンを「スマホ」と略すのに違和感があるのですが,⁠スマフォ」派も増えてきているようですね。どっちにしろ違和感はありますが…。

図3 スマートフォンサイトでよく使われるコード集

図3 スマートフォンサイトでよく使われるコード集

4. 【レポート】デザインやアイデアの参考になる日本のFacebookページ 10タイトル (1) デザインの参考に! Facebookページ 5タイトル | ネット | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2011/08/17/fbpage201108/index.html

デザインやアイデアの参考になる,日本のFacebookページを紹介しています。

デザインの参考として5つ,アイデアの参考として5+1つのサイトが掲載されていました。市役所のサイトをFacebookに完全移行した佐賀県武雄市のFacebookページが,⁠+1」としておまけ的に取り上げられていますね。

図4 デザインやアイデアの参考になる日本のFacebookページ

図4 デザインやアイデアの参考になる日本のFacebookページ

5. Photoshop VIP ― 本家Google+のインターフェースをそっくり再現できるPhotoshop無料PSDキットhttp://photoshopvip.net/archives/28142

Google+で使われているインターフェイス素材がセットになった,Photoshopファイルを紹介した記事です。

また,Google+風ボタンをCSSで作るフレームワークも紹介されていました。

図5 Google+のインターフェイス素材ファイルなど

図5 Google+のインターフェイス素材ファイルなど

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

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

10 Excellent HTML5 coding Tools Many Users Don’t Know Abouthttp://smashinghub.com/excellent-html5-coding-tools.htm

今回は,HTML5のコーディングのためのツール各種が紹介されている記事を取り上げます。

「Initializr」は,HTML5でサイト作成を始めるための,ひな形となるHTML,CSSとJavaScriptファイルのセットを生成するWebサービスです。HTML5に対応していないブラウザ対策としてのJavaScriptも一緒に生成されるので,スタート時の手間がかなり軽減できそうです。

ほかに,HTML5のリファレンス的なものや,フレームワークも紹介されています。

図6 HTML5でサイト制作するときに役立つツールいろいろ

図6 HTML5でサイト制作するときに役立つツールいろいろ

今週の気になるWebネタ

“Tumblr”を利用した水野美紀さんの公式サイトに「かなり,やる」の声 - はてなブックマークニュースhttp://b.hatena.ne.jp/articles/201108/5510

水野美紀の公式サイトがTumblrを利用していることが話題となっています。Facebookページもありますが,公式サイトとしての顔はTumblrサイトのようです。Twitterもやっています。

TumblrもFacebookページも同じ内容が投稿されているのですが,Tumblrではリブログされ,Facebookでは「いいね!」やコメントが付き,とそれぞれで盛り上がっていていい感じです。

アメブロを使わず,独自サーバーでの公式サイトもなく,ソーシャルメディアだけで情報発信する女優というのは,ちょっとデキる女って感じで彼女のイメージとも合っているんじゃないでしょうか。

きっとそのうちGoogle+上にも公式ページができるんでしょうね。ビジネスアカウントが始まってからでしょうか。各ソーシャルメディアの特性を知る上でも,こういった有名人の取り組みには注目したいと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入