週刊Webテク通信

2013年2月第1週号1位は、Webデザインにおけるキャラクターやマスコットの役割、気になるネタは、紙でもないスマホでもない手書き? 電子ノート「WG-N10」

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

1. Characters and Mascots in Web Design and their Role - Designmodohttp://designmodo.com/characters-mascots-web-design/

Webデザインにおけるキャラクターやマスコットの役割について解説しています。

Webサイトでブランドを表現するにはキャラクターやマスコットは有効で、ここ5年くらいの間でWeb関連企業のサイトにうまく使われているケースが増えたとのことです。

完璧なマスコットの要件として、以下の3つが挙げられています。

  • 独創性があること
  • ハイクオリティであること
  • ストックフォトサイトの素材を使わない

2つ目のハイクオリティというのは、絵そのものの出来ではなく、サイズによっても品質が落ちないベクトルデータで扱うという、解像度的な品質のことでした。

キャラクターやマスコットが効果的に使われているサイトのギャラリーも掲載されています。

図1 Webデザインにおけるキャラクターやマスコットの役割について
図1 Webデザインにおけるキャラクターやマスコットの役割について

2. コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックスhttp://www.webcreatorbox.com/tech/css3-text-link/

CSS3のtransitionプロパティを使って、テキストリンクにちょっとしたアニメーション効果を加えるテクニックを紹介しています。

本文にも書いてある通り、やりすぎると目障りになりそうですが、ちょっとした記述で細部までこだわっている感じが出せてよさそうです。

図2 テキストリンクにトランジション効果を加えるテクニックいろいろ
図2 テキストリンクにトランジション効果を加えるテクニックいろいろ

3. Web Design: 10 Creative Techniques Using CSS3 Box Shadowhttp://www.hongkiat.com/blog/css3-box-shadows-effects/

CSS3のボックスシャドウを使ったテクニックを10個紹介しています。

アップルのサイトにあるような、複数カラムに分かれたパネルや、エリア全体がクリッカブルになっているアイコン入りボックスを実現するコーディング例もありました。

図3 CSS3のボックスシャドウを使ったテクニックいろいろ
図3 CSS3のボックスシャドウを使ったテクニックいろいろ

4. ウェブサイト作成の勉強になった日本語スライドのまとめ|Webparkhttp://weboook.blog22.fc2.com/blog-entry-349.html

Web制作関連の学習ができる、日本語のスライドを10個紹介しています。

「ノンデザイナーのための配色理論」「ノンプログラマーのためのjQuery入門」など、専門分野以外の領域を学べる初心者向けの内容が中心です。

図4 Web制作関連の学習ができる日本語のスライド10選
図4 Web制作関連の学習ができる日本語のスライド10選

5. 30 Creative Portfolio Web Designshttp://designerves.com/article/30-creative-portfolio-web-designs/

独創性のあるポートフォリオサイトのギャラリーです。

最近のトレンドと言われる、ドロップシャドウやグラデーションをあまり使わないフラットなイメージのサイトが多いように感じました。

図5 独創性のあるポートフォリオサイトのギャラリー
図5 独創性のあるポートフォリオサイトのギャラリー

そのほか、最近の記事の中から、じわじわと話題のGoogle+関連の記事3つです。

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

Css3 drop shadow generatorhttp://www.wordpressthemeshock.com/css-drop-shadow/

CSS3でのドロップシャドウを作成するWebサービスです。通常のドロップシャドウのほか、いくつかの違ったパターンの影が付けられます。

最近わたしは角丸やドロップシャドウなどはFireworksで図形を作り、CSSプロパティのパネルからCSSコードを取得するというやり方をしています。しかし、この方法では、このジェネレータで作れるような影や、フキダシのような形など、コーディングのテクニックを使ってCSS3で複雑な図形を簡単に描くようなことはできません。

なので、やはりこういったジェネレーター類があると、やはり便利だということを再確認しました。

図6 CSS3でのドロップシャドウのジェネレーター
図6 CSS3でのドロップシャドウのジェネレータ

おすすめ記事

記事・ニュース一覧