週刊Webテク通信

2009年8月第3週号 1位は,Webデザイナーのための5つの上級Photoshopテクニック/気になるネタは,TypePadのマイクロブログ機能はPosterousそっくり

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

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

1. Carsonified ? 5 Advanced Photoshop Techniques for Web Designershttp://carsonified.com/blog/design/5-advanced-photoshop-techniques-for-web-designers/

WebデザイナーのためのPhotoshopチュートリアル記事です。

以下のような,最近のWebデザインのトレンドを押さえたテクニック集となっています。

  1. シンプルで効果的なボタン
  2. 透明度があってフェードアウトしていくナビゲーションメニュー
  3. 型押しされたような文字
  4. ぼかした光と影でボックスを浮かび上がらせる
  5. 奥行きを持った3D的空間の演出

Photoshopでボタンやバッジを作るチュートリアルのリンク集30 Useful Photoshop Buttons and Badges Tutorials : Speckyboy Design Magazineという記事も併せてご参考に。

図1 WebデザイナーのためのPhotoshopテクニック集

図1 WebデザイナーのためのPhotoshopテクニック集

2. CSS Sprites with Inline Images | CSS-Trickshttp://css-tricks.com/css-sprites-with-inline-images/

imgタグで配置した画像に対して,CSSスプライトを使おうというテクニックの紹介です。

小さなアイコンや記号など,サイト内で何度も出てくる画像を一枚にまとめておくことでロード時間を短縮させようというのがCSSスプライトです。CSSスプライト用の画像は背景画像として配置する方法が一般的ですが,CSSの絶対配置と「clip:rect」を使ってインライン画像に使うこともできるんですね。目から鱗のテクニックです。IE6でもちゃんと使えるそうですよ。

「clip:rect(0 48px 48px 0);」といった指定のとき,この数値はマージンなどの指定と同様に,時計回りに上,右,下,左の順番だそうです。この場合ちょっと分かりにくいのですが,上端のY軸の値,右端のX軸の値,下端のY軸の値,左端のX軸の値ということになります。

MOONGIFT: ? 便利!CSS Spriteを作成するAIRアプリ「Tonttu」:オープンソースを毎日紹介では,CSSスプライト用に複数画像を一枚にまとめてくれるAIRアプリが紹介されています。プロジェクトファイルを保存しておけるので,後から画像を追加/削除できるのが便利なようです。

図2 インライン画像でのCSSスプライトテクニック

図2 インライン画像でのCSSスプライトテクニック

3. A Showcase of Fantastic Footer Designs | Web Design Ledgerhttp://webdesignledger.com/inspiration/a-showcase-of-fantastic-footer-designs

フッタデザインのショーケースです。

昔は単にコピーライトを入れておくだけの使われ方が多かったフッタ部分ですが,今はユーザーに長く滞在してもらうためのナビゲーションを入れる重要な場所としてデザインされているとのことです。

図3 フッタデザインを多数紹介

図3 フッタデザインを多数紹介

4. Taming Advanced CSS Selectors | CSS | Smashing Magazinehttp://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

CSSセレクタに関するまとめ記事です。ブラウザによる対応状況についてもちゃんと触れられています。

探せば日本語でのCSSセレクタの記事もたくさんあると思いますが,虎の巻的ページはたくさんブックマークしておいても損はないと思い紹介しました。

原典に当たりたいという方は,W3Cのセレクタについての項Selectors Level 3もチェックしましょう。

5. What’s in your Cart? 30+ High-Quality Shopping Cart Templates | Noupehttp://www.noupe.com/design/shopping-cart-templates.html

ショッピングカートシステムの高品質のテンプレートを,ベースとなるシステム別に紹介しています。

ECサイト構築のシステムとして取り上げられているのは,以下の5つでした。

  • Wordpress
  • osCommerce
  • Magento
  • Zen Cart
  • CRE Loaded

図4 ショッピングカートのテンプレート集

図4 ショッピングカートのテンプレート集

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から,便利なスクリプトのまとめ記事とチュートリアルを紹介します。

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

Twilog - Twitterのつぶやきをブログ形式で保存http://twilog.org/

Twilog(ついろぐ)は,Twitterのつぶやきをブログ形式で保存,閲覧できるWebサービスです。

TwitPicなどのURLを含むつぶやきでは画像が表示されたり,過去のつぶやきを検索できたりと,なかなか機能も充実しています。

OAuth認証を使ってTwitterユーザーが気軽に使えるようになっていますし,なにより日本語のサービスなので,Twitter初心者にも使いやすいサービスでしょう。

自分のつぶやきをまとめて公開するという目的では,Friendfeedを使うという方法もありますね。

図5 Twitterのつぶやきをブログ形式で公開できるサービス「Twilog」

図5 Twitterのつぶやきをブログ形式で公開できるサービス「Twilog」

今週の気になるWebネタ

Six ApartがTypePadにマイクロブログ機能を装備, それはPosterousそっくりhttp://jp.techcrunch.com/archives/20090818six-apart-equips-typepad-for-microblogging-posterous-style/

TypePadでPosterousと同じようなことができるようになるようですね。

TypePadにメールで記事やリンク,ビデオ,画像などを簡単に投稿し,同時にTwitter,FriendFeedなどにも自動投稿する機能が付いたようです。日本のTypePadのサイトには,まだこの件についての記述はありませんでした。

携帯電話のメールは使えるけどパソコンには詳しくないという人にとって,Posterousはおすすめのブログサービスだと思います。同等のことが有料でサポートもあるTypePadでできるのなら,芸能人・著名人ブログとして前途有望ではないかとわたしは思ってます。

ところでこのPosterous,読み方がわかりにくいですが「ポスタラス」「ポステラス」のどちらかを使っている人が多いようですね。Posterousに投稿することを「ポスる」なんて言っている人もいるようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入