週刊Webテク通信

2013年5月第1週号 1位は,フラットデザインのサイトの効果,気になるネタは,カルピス,写真を“リア充”に加工してくれる期間限定フォトサービス

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

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

1. Flat design sites that work | Webdesigner Depothttp://www.webdesignerdepot.com/2013/04/flat-design-sites-that-work/

フラットデザインのサイトの効果について解説しています。

フラットデザインのポイントはシンプルとミニマリズムで,サイトの情報を伝えやすくなります。また,フラットデザインのシンプルさは,モバイル端末など異なるデバイスへの最適化が簡単だという面もあります。

当時は見過ごされていたけれど,2007年のMicrosoft Zuneのビジュアルでもクリーンでタイポグラフィベースのインターフェイスが形作られていたとのことです。そういったフラットデザインの要素を持ったものは以前からあったのですが,2013年になってデザイントレンドの中心となっています。

CSS3でグラデーションやボックスシャドウが使えるようになったのに,フラットデザインの流行でそういった効果がトレンドから外れてしまったのは皮肉だというようなことがこの記事のコメントにあったのですが,まさにわたしもそう感じていました。

図1 フラットデザインに関する記事

図1 フラットデザインに関する記事

2. 20 Incredibly useful tools and resources for Web designers - The Next Webhttp://thenextweb.com/dd/2013/04/12/25-incredibly-useful-tools-for-web-designers/

Webデザイナーのための便利なツールや情報の紹介です。ジェネレーターのようなツールや,役に立つ情報源などが取り上げられています。

プロトタイプを作るにはKeynoteを使うのがおすすめという興味深い記事もあります。

図2 Webデザイナーのための便利なツールや情報

図2 Webデザイナーのための便利なツールや情報

3. 25 Fresh Web Design Resources Toolshttp://smashinghub.com/25-fresh-web-design-resources-tools.htm

Webデザインに役立つツールやフレームワークなどを紹介しています。こちらはjQueryのプラグインなどJavaScript系のものが多めです。

フラットデザインのモックアップキットといったものもありました。フラットデザインのiPhoneやiPadに画面を合成したものを簡単に作れそうです。

図3 Webデザインに役立つツールやフレームワークなど

図3 Webデザインに役立つツールやフレームワークなど

4. Retina Web Design - Info, Tools And Techniqueshttp://www.designresourcebox.com/retina-web-design-info-tools-and-techniques/

Retina対応のWebデザインに関するツールやテクニックなどを解説しています。

HTMLとCSSの記述のサンプルのほか,以下の方法についても説明してあります。

  • JavaScriptを使う方法
  • アイコンフォントを使う方法
  • SVGを使う方法

図4 Retina対応Webデザインのツールやテクニック

図4 Retina対応Webデザインのツールやテクニック

5. 25 Examples of Websites with Transparent Backgrounds : Dezign Matterzhttp://www.dezignmatterz.com/25-examples-of-websites-with-transparent-backgrounds/

透明度を使ったWebデザインのギャラリーです。

昔のWebデザインでは使いにくかった手法ですし,うまく使えば非常に印象的になると思います。

図5 透明度を使ったWebデザインのギャラリー

図5 透明度を使ったWebデザインのギャラリー

そのほか,最近の記事の中から,気になるニュース記事を紹介します。

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

ジンジャー|無料英文チェックソフト|ネイティブ表現|仕事効率http://www.getginger.jp/

Ginger(ジンジャー)は,スペルや文法だけでなく,文脈を解析して正しい英文に直してくれるサービスです。⁠知らずにやってる恥ずかしい英語のミスまできちんと直せる新しい英文チェッカー」とのことで,オンライン上の大量の英語のフレーズを元に文脈解析するシステムを開発したそうです。

実はこれ,Webサービスとして使えるのは機能のお試し用で,本来はダウンロードして使うものでした。Chrome,Safari,Firefoxの拡張機能版と,Microsoft Office対応版があり,各アプリケーション上での英文入力時に利用することができます。

Gingerを使用するときにはインターネット接続が必要とのことで,英文修正の処理はネット経由で行っているようです。なお,プレミアムプロダクトというのがあって,テキストの読み上げ機能と,Ginger校正機能英語学習機能が追加されるようです。

図6 英文チェックのサービス&ツール

図6 英文チェックのサービス&ツール

今週の気になるWebネタ

カルピス,写真を“リア充”に加工してくれる期間限定フォトサービス - CNET Japanhttp://japan.cnet.com/marketers/news/35031280/

ゴールデンウイークに合わせたカルピスによるFacebook連動型企画「オアシスフォトファクトリー」が話題になっています。Facebookの自分のアルバムの写真を指定すると,手作業で「リア充加工」されて再投稿されます。ゴールデンウイークにどこにも行けない人でも,アウトドアなイケてる写真をFacebookに投稿できるというわけです。

ココロとカラダの渇きをを癒やすという「カルピスオアシス」の商品コンセプトが,渇いた写真にリア充加工でうるおいを与えるという企画につながっているわけですね。ラクダがPhotoshopを使って手作業で加工するという設定もよく考えられています。

「いいね!」が1つも付かなかった場合には,申請すると抽選でカルピスオアシス1ケースと粗品がもらえるというのもこの企画のオチとして面白いですね。なお,既に定員1500名に達してしまったそうですが,サイトには「5月3日受付再開」と出ています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入