週刊Webテク通信

2009年8月第2週号1位は、優れたブログデザインの重要なポイント10項目/気になるネタは、いよいよReTweetがTwitterの正式機能に

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

1. 10 Important Traits of a Great Blog Designhttp://sixrevisions.com/web_design/10-important-traits-of-a-great-blog-design/

優れたブログデザインの重要なポイントが10項目挙げられています。

  1. 読みやすさ
  2. コンテンツに集中できる
  3. ほかのエントリーやコンテンツが探しやすい
  4. コメント部分のデザイン
  5. ソーシャルメディアとの連携
  6. 印象的なヘッダー
  7. コンテンツ内の効果的なビジュアル
  8. セマンテックなHTML
  9. コンテンツの論理的な分類
  10. 見出しやタイトルのデザイン

といった内容について解説しています。目新しいものはありませんが、セルフチェックのためのリストとして使えそうです。

図1 ブログデザインの重要なポイント10項目
図1 ブログデザインの重要なポイント10項目

2. The Best Adobe Illustrator Text Effect Tutorials | Creative Nerdshttp://creativenerds.co.uk/tutorials/the-best-adobe-illustrator-text-effect-tutorials/

Adobe Illustratorでテキストを加工して効果を加えるチュートリアルがまとめられています。

単純に見えるところでも実はすごく手間のかかる処理をしていたり、複雑に見えても実は簡単に実現できる機能があったりと、いろいろ勉強になりました。

図2 Illustratorのテキスト加工のチュートリアル20選
図2 Illustratorのテキスト加工のチュートリアル20選

3. CSS Image Maps: A Beginner’s Guide | Noobcubehttp://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

CSSによるイメージマップの作り方を初心者向けに丁寧に解説しています。

「position: relative;」を指定した領域内では、その領域の左上を基点として絶対配置ができることを使って、各クリッカブルなエリアを絶対配置で設定するという定番のテクニックですね。

HTMLで作るイメージマップと同様のものから始め、ロールオーバー効果を与えたもの、ロールオーバーとともにツールチップ風に文字を出現させるものと、三段階にステップアップする内容となっています。

図3 CSSイメージマップの作り方
図3 CSSイメージマップの作り方

4. 5 Sliding Content Techniques, Examples & jQuery How to’s | Noupehttp://www.noupe.com/design/sliding-content.html

コンテンツをスライドさせるテクニックの実例と、同様の効果をjQueryで実現する方法をセットで紹介しています。カルーセル、スライダーといった名前で呼ばれる効果など、スライドする表現は最近のWebデザインでの流行のようですね。

なお、カルーセルとは回転木馬のことだと知っている人は多いと思いますが、スライド映写機用の回転式スライドトレーのこともカルーセルと言うらしく、それが写真をスライドさせて見せる効果をカルーセルと呼ぶ語源だと思います。

図4 コンテンツをスライドするテクニックいろいろ
図4 コンテンツをスライドするテクニックいろいろ

5. Big Fonts in Web Design | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorialshttp://abduzeedo.com/big-fonts-web-design

大きな文字を使ったWebページのデザインギャラリーです。

文字を画像にせずにCSSでフォント指定して使っているケースもけっこうあります。欧文だとOSに標準で入っている書体でもそれなりにかっこよくできるところがうらやましいですね。

図5 大きな文字のWebデザインギャラリー
図5 大きな文字のWebデザインギャラリー

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

そのほか先週の記事から、あいかわらず話題のTwitterに関する記事を紹介します。

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

peatea - ウェブページの任意の位置を頭出しhttp://pt.goga.co.jp/

画像

人にWebページを紹介するとき、見て欲しい箇所がかなりスクロールした先だというケースってありますよね。そんなとき、peateaを使うと任意の位置を表示するURLを作ることができます。

そのURLにアクセスすると、フレーム内に頭出しされたページが表示されるという仕組みになっています。リンク先のページもフレーム内で展開するので、ネットにそれほど詳しくない人は混乱するかもしれません。

右上の「×」ボタンでフレームを外すと頭出しの位置も先頭に戻ってしまうのが、仕組み上しょうがないとはいえ残念ですね。

シンプルかつありそうでなかったサービスなので、覚えておくといつか使う機会がありそうです。

おすすめ記事

記事・ニュース一覧