週刊Webテク通信

2010年6月第4週号1位は、CSSのボーダーを使ったテクニック、気になるネタは、iPhone 4:「1日100万台」人気+不具合報告

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

1. CSS Border Tricks | Pressed, Beveled, Shadows, Intented Borders | CSS Border Tutorial | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanakahttp://www.sohtanaka.com/web-design/css-border-tricks-tutorial/

CSSのボーダーを使って簡単にベベルや型押しの効果を与えるテクニックの紹介です。

border-bottomだけ、あるいはborder-bottomとborder-rightの色を変えるといったテクニックは以前から使われていますが、CSS3の角丸と組み合わせるとより凝った効果に見えますね。

outlineプロパティを利用してベベル効果を与えるテクニックも、1ピクセルのラインが入るだけでぐっと質感が上がります。

リストを使った垂直方向のメニューで、li要素の上下に色違いのボーダーを入れて立体的に見せるテクニックも効果的です。

図1 CSSのボーダーを使ったテクニック
図1 CSSのボーダーを使ったテクニック

2. Awesome Recent Website Redesigns | Webdesigner Depothttp://www.webdesignerdepot.com/2010/06/awesome-recent-website-redesigns/

最近デザインリニューアルされたサイトの、変更前後のデザインを比較して紹介しています。よりシンプルでクリーンな方向に向かっているサイトが多いようです。

中でも「Veerle’s Blog」のリニューアルは、最近のトレンドに当てはまっているんじゃないでしょうか。よりソフトな印象になり、質感が高まっています。1ピクセルのラインが上手く使われていますね。

文字と背景色のコントラストの差が少なくなったため、記事を読むページでは、背景が白で文字が黒のハイコントラストバージョンに切り替えることもできます。

図2 すばらしいデザインリニューアルをしたWebサイトいろいろ
図2 すばらしいデザインリニューアルをしたWebサイトいろいろ

3. 20 Fresh & Easy To Follow Photoshop Web Interface Tutorials | nenuno creativehttp://nenuno.co.uk/creative/tutorial/20-fresh-easy-to-follow-photoshop-web-interface-tutorials/

WebページのレイアウトをPhotoshopで行うチュートリアルのリンク集です。

Photoshop上でページ全体のデザインをきっちり作り上げるチュートリアルで、その先のHTML+CSS化については触れられていません。

図3 PhotoshopでのWebデザインチュートリアル
図3 PhotoshopでのWebデザインチュートリアル

4. 意外と知られていない機能が多い!?Firebugの使い方 | THE HAM MEDIAhttp://h2ham.seesaa.net/article/154387441.html

Firefoxのアドオン「Firebug」を使いこなすためのヒントが紹介されています。

意外と知られていない機能を取り上げた解説なのですが、Firebugでどんなことができるかの入門にもなる記事だと思います。

図4 Firebugの意外と知られていない機能の紹介
図4 Firebugの意外と知られていない機能の紹介

5. Get Inspired: 35+ Warm VS Cool Color Website Designshttp://www.1stwebdesigner.com/inspiration/warm-cool-color-website-designs/

暖色系 VS 寒色系のWebデザインのショーケースです。それぞれ20個弱くらいのサイトが紹介されています。

青系のサイトは見慣れた感じがするのに対し、黄色系のサイトは見慣れないこともあって新鮮な印象がありますね。

図5 暖色系と寒色系に分けてのWebデザインショーケース
図5 暖色系と寒色系に分けてのWebデザインショーケース

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

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

Onbile - Free mobile website templateshttp://www.onbile.com/

モバイル向けのWebサイトを簡単に作れるWebサービスです。

海外のサービスなので、もちろん日本のケータイ向けではなく、iPhone、 Androidなどのスマートフォンをターゲットとしています。

テンプレートは、大きく分けて二つ用意されています。

ひとつは連絡先などを載せたプロフィールページを作るもの、もうひとつはRSSを読み込ませてブログなどを読めるようにするものです。

サイト上のエディタで入力した日本語は文字化けしてしまうため、プロフィールページを作るのは厳しそうです。別サイトやTwitterなどのURLを入れておくだけなら、日本語が使えなくても大丈夫かもしれません。

RSSを読み込ませたものに関しては、日本語でも大丈夫でした。

ロゴ画像をアップロードしたり、背景色を変えることなどはできるのですが、細かいカスタマイズはできません。基本的には用意されたままのデザインで使うものです。

生成されるJavaScriptのコードを自分のサイトのトップページに入れておくと、iPhoneやAndroidからのアクセスは自動的にOnbileで作ったページに転送されます。

作ったページは「http://www.onbile.com/(ユーザー名⁠⁠」でパソコンからでもアクセスできます。わたしがテストで作ってみたページのURLはhttp://www.onbile.com/ashinoyoshiです。ウィンドウ幅を狭めて確認してみてください。

図6 フリーのモバイルサイト構築サービス Onbile
図6 フリーのモバイルサイト構築サービス Onbile

おすすめ記事

記事・ニュース一覧