週刊Webテク通信

2009年7月第5週号 1位は,「カートに入れる」ボタンのショーケース/気になるネタは,iPhoneに直接付けられるストラップがいろいろ登場

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

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

1. “Add to Cart” Button Showcase | Vandelay Design Bloghttp://vandelaydesign.com/blog/galleries/add-to-cart/

ECサイトの「カートに入れる」ボタンのショーケースです。カートに追加するということで「+」の記号を使うケースが多いようです。

「Cart」ではなく「Bag」という表記のものも結構あります。でも,紙袋(ショッピングバッグ)のアイコンよりも,あのゴロゴロ押すショッピングカートのアイコンの方がなじみがありますよね。

ショッピングカートページを集めた35 Inspirational Shopping Cart Page Designs | Noupeという記事もありました。こちらはカートの中身を閲覧するページのショーケースです。

これらのショーケースは,ECサイトのデザインにとても参考になりそうです。

図1 「Add to Cart」ボタンのデザインを見比べられます

図1 「Add to Cart」ボタンのデザインを見比べられます

2. The Essence Of About Us Page With 12 Captivating Showcases | Onextrapixel - Showcasing Web Treats Without Hitchhttp://www.onextrapixel.com/2009/07/31/the-essence-of-about-us-page-with-12-captivating-showcases/

「About Us」ページの内容に関する考察とショーケースです。

「About Us」ページは,サイトに訪れた人の

  • あなた(たち)は誰?
  • 何をしているの?
  • 信用できるの?

といった疑問に答えるページと考えるとよさそうです。

記載されることが多い内容としては,

  1. 組織のプロフィール
  2. 連絡の取り方
  3. 免責条項と規約・使用条件など法的な情報
  4. 顧客と提携先
  5. 人材募集
  6. プレスリリースなど広報
  7. 年次報告書など投資家向け情報(IR)
  8. 地域社会への貢献などCR活動について
  9. サイトの制作チームなどのクレジット
  10. よくある質問と答え(FAQ)

といったものがあり,それぞれの実例となる「About Us」ページも紹介されています。

図2 「About Us」ページについてのまとめ記事です

図2 「About Us」ページについてのまとめ記事です

3. [CSS]ネガティブマージンの理解を深め,活用するテクニック集 | コリスhttp://coliss.com/articles/build-websites/operation/css/css-using-negative-margins.html

ネガティブマージンに関する解説記事です。Smashing MagazineのThe Definitive Guide to Using Negative Marginsを翻訳しています。

ネガティブマージンとはマイナスの数値を指定したマージンのことです。マージンにマイナスの値を指定するのは裏技ではなく正しいCSSの記述で,IE6以降のモダンブラウザでサポートされているそうです。

しかし,Dreamweaverのデザインビューは対応していないようで,それが原因で使うのがためらわれるという人も多そうですね。

2カラムのリキットレイアウトの片方を固定幅としたい場合,ネガティブマージンを使うことで実現できます。100%の横幅のうち200pixel分をサイドバーとする場合,メインの100%の領域にマイナス200pixelのマージンを作り,そこにサイドバーをフロートさせるといいそうです。

図3 ネガティブマージンについての解説です

図3 ネガティブマージンについての解説です

4. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available | tripwire magazinehttp://www.tripwiremagazine.com/tools/tools/25-create-amazing-image-effects-with-some-of-the-best-jquery-plugins-available.html

フォトギャラリーやスライドショーなど,画像の見せ方に関するjQueryプラグインが多数紹介されています。

図4 画像に関するjQueryプラグインがまとめられています

図4 画像に関するjQueryプラグインがまとめられています

5. The Ultimate Round-Up of Fireworks Tutorials and Resources | Tutorials | Smashing Magazinehttp://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/

Fireworksのチュートリアルやテクニックなどの情報源を集めた膨大なリンク集です。ビデオチュートリアルも豊富に紹介されていて,全部見るには相当時間がかかりそうですね。

Photoshopに比べるとFireworksはTipsやテクニックの情報が少ないので,Fireworksユーザーにはうれしい記事だと思います。「Fireworksってサイトのラフを作るツールでしょ」と誤解している人もぜひこれを見て,デザインの最終段階まで使えるツールだと知ってほしいですね。

図5 Fireworks使いのための膨大なリンク集です

図5 Fireworks使いのための膨大なリンク集です

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

そのほか先週の記事から,フリーの素材集とFirefoxアドオン集を紹介します。

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

CSS Prism by Ryan Berghttp://cssprism.com/

サイトかCSSのURLを入力すると, 使われている色を値とともに表示します。単に色を表示するだけのサービスかと思ったのですが,色を変更して,変更内容が適用されたCSSをダウンロードする機能もありました。その色がCSS中のどこに使われているのか確認もできます。

場当たり的に使ってしまった色を,あとで全体のバランスをみて調整するというケースに使えそうです。もちろんリニューアルでサイトの色合いをがらっと変える場合にも便利でしょう。

シンプルで操作感がいいツールです。ブックマークレットで手軽に使えるところもいいですね。

なお,CSSをダウンロードする機能をわたしのMac環境で試してみたところ,Safariでは大丈夫なのですがFirefoxではうまくいきませんでした。

図6 CSSからカラーを抽出して表示,変更ができるサービスです

図6 CSSからカラーを抽出して表示,変更ができるサービスです

今週の気になるWebネタ

iPhone FAN (^_^)v: これは新しい!! iPhoneに直接付けるストラップ登場!!http://iphonefan.seesaa.net/article/124714587.html

ASCII.jp:新常識「iPhoneにストラップは付けられる」|都庁前iPhoneクラブhttp://ascii.jp/elem/000/000/437/437611/

iPhoneに直接付けられるストラップが登場しています。iPhone下部のネジを外してそこにはめこむというもので,2つあるネジのうち片方使うものと両方使うものとがあるようです。ナイスアイデアとも無理矢理とも言えそうですが,待ってましたという人も少なくないでしょう。

片方のネジ穴だけを使うタイプは,ふつうのストラップっぽく使えそうです。自分の好きなストラップを付けられるアダプタータイプのものもありますね。

二つのネジ穴を使うタイプのものは,安定性・安全性に優れているようです。操作するときにも,これが付いている方が持ちやすいのかもしれません。

ネジを外すことに不安を覚える人もいるでしょうが,片穴式ストラップを販売しているエザンスのサイトによると「このネジはアップルショップ等にてサポートを受ける場合,必ず必要ですので紛失しないようにして下さい。また交換サービスを受ける時は購入時の状態にネジを戻して下さい。」とのことです。まあ,最後にはネジを戻せば大丈夫ということなんでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入