週刊Webテク通信

2010年12月第3週号1位は、Webサイトを制作するときに考慮すべき60の事柄、気になるネタは、電子書籍を自炊できるレンタルスペースが開設

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

1. 60 Questions to Consider When Designing a Websitehttp://sixrevisions.com/web_design/60-questions-to-consider-when-designing-a-website/

Webサイトを制作するときに考慮すべき事柄が疑問形でまとめられています。

  • プロジェクト管理のための15の質問
  • コードオーサリングのための15の質問
  • Webデザインのための15の質問
  • ユーザーエクスペリエンスのための15の質問

が紹介されており、サイト制作の際のチェックリストとして使えると思います。

図1 Webサイトを制作するときに考慮すべき60項目
図1 Webサイトを制作するときに考慮すべき60項目

2. HTML5とCSS3を使ってスマートフォン向けサイトを構築 - iPhone版Yahoo!JAPANトップの開発事例紹介(1/4):CodeZinehttp://codezine.jp/article/detail/5619

スマートフォン版Yahoo! JAPANトップの制作の際のノウハウを詳しく解説しています。対象をiOSとAndroid OSのスマートフォン端末に絞ることにより、HTML5/CSS3といった最新技術に基づいたサイト構築を行っているとのことです。

  1. CSSグラデーション
  2. 角丸の表現
  3. テキストシャドウ
  4. CSSアニメーション
  5. WEBストレージ
  6. GeoLocation API
  7. Android対応
  8. 画面サイズの違い

について、サンプルコードを使って解説しています。

図2 スマートフォン向けサイト制作のノウハウ解説
図2 スマートフォン向けサイト制作のノウハウ解説

3. Best CSS3 Animation Demos and Tutorialshttp://slodive.com/web-development/best-css3-animation-demos-tutorials/

CSS3アニメーションのデモとチュートリアルを多数紹介しています。

Webkitブラウザ(SafariとChrome)でしか動かないものもあります。非対応のブラウザのために、同様のアニメーションを実現するJavaScriptを紹介しているものもありました。

図3 CSS3アニメーションのデモとチュートリアルいろいろ
図3 CSS3アニメーションのデモとチュートリアルいろいろ

4. “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces - Smashing Magazinehttp://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

フォントの選び方や使い方の原則について解説しています。

場面に合わせたフォントを選ぶ、フォントファミリーを知る、コントラストをしっかり付ける、やりすぎない(変わったフォントを本文全部に使うなど)といった原則を紹介しています。しかし、最後は「ルールはない(There Are No Rules⁠⁠」と締めていました。

図4 フォントの選び方の原則
図4 フォントの選び方の原則

5. 40 Excellent Examples of Texture in Web Design | Inspirationhttp://webdesignledger.com/inspiration/40-excellent-examples-of-texture-in-web-design

テクスチャを使ったWebデザインのギャラリーです。派手な柄ではなく、微妙なテクスチャーで質感をアップしている例が目立ちます。

テクスチャ選びには、テクスチャ素材を探す時、まずチェックしたいサイト -Lost & Takenという記事が役立ちそうです。

図5 テクスチャを使ったWebデザインのギャラリー
図5 テクスチャを使ったWebデザインのギャラリー

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

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

ブログ・サイトに貼る主要ソーシャルサービスのボタンソースジェネレータ :: 5509http://5509.me/log/social-service-buttons-generator

ブログ記事などをソーシャルメディアでシェアするための、各種ボタンを生成するジェネレータです。はてなブックマーク、Twitter、Facebookの「いいね!⁠⁠、Evernoteのクリップ、mixiチェック、mixiイイネに対応しています。

静的ページの場合は、ページタイトルとURLを入力してコードを生成します。WordPress、Movable Typeのテンプレートで使えるコードも作成できます。

mixiのボタンを利用するにはチェックキーというのを取得する必要があり、チェックキーの取得にはデベロッパー登録が必要とのことでした。

図6 主要ソーシャルサービスのボタンソースジェネレータ
図6 主要ソーシャルサービスのボタンソースジェネレータ

おすすめ記事

記事・ニュース一覧