週刊Webテク通信

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

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

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

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

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

今週の気になるWebネタ

いよいよ ReTweet が Twitter の正式機能に:シロクマ日報:ITmedia オルタナティブ・ブログhttp://blogs.itmedia.co.jp/akihito/2009/08/retweet-twitter.html

Twitter上でユーザーが考案しすっかり定着したReTweet(RT)が,公式の機能として採用されることになったそうです。Twitterのサイト上で簡単にReTweetができるようになったり,ReTweetのフォーマットが決まったりするようですね。

RTとか@ユーザー名という「記号」が,Twitter初心者にはとっつきにくい印象を与えるんじゃないかと私は思っています。RTと@ユーザー名が複数入っている投稿は,呪文とかコマンドのように見えてくるんですよね。ユーザー名に日本語が使えるとまた印象も変わるんでしょうが。

このReTweet,場合によってただの転送だったり引用だったりと,使われ方がアバウトなのも気になるところです。純粋なRT以外は別扱いのほうがいいとも考えたのですが,あまり厳密に複雑なルールを作るよりは,Twitterらしくゆるく自由に使えた方がいいのでしょう。RT以外にいろんな記号を作ったら,それこそ暗号みたいになって初心者には分かりにくくなりますもんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入