週刊Webテク通信

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

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

ネットで見かけた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でのドロップシャドウのジェネレータ

今週の気になるWebネタ

ASCII.jp:紙でもないスマホでもない手書き? 電子ノートを迷走買い|T教授の「戦略的衝動買い」http://ascii.jp/elem/000/000/760/760580/

シャープから出たという電子ノート「WG-N10」のレビュー記事を読んで,はじめてこの製品を知りました。そして,シャープの液晶パッドWIZを思い出しました。シャープといえばザウルスですが,そこまでお金を出せなかったわたしはWIZを持っていたんです。

ザウルスは横画面という印象が強いですし,ザウルスの再来と言うより「WIZの再来」じゃないんでしょうか。WIZは縦画面で,Newton(アップルのPDA)やPalm(グラフィティという手書き文字入力で一時代を築いた)を連想させるような電子手帳でした。ザウルスほどメジャーじゃなかったので,知らないという人が多そうですが…。

このWG-N10の「電子ノート」という目の付け所は良かったようですが,スマートフォンやタブレット端末とクラウドサービスを使いこなすのが当たり前の層には,微妙なポジションにある製品のようです。ただ,こういった製品は,消費者の希望通りに機能を追加していくとつまらなくなることが多いので,我が道を行ってほしいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入