週刊Webテク通信

2013年11月第2週号 1位は,フラットデザインの素材,配色,フォント,サンプルなどのサイトまとめ,気になるネタは,NTTドコモ,iPhone向けに「しゃべってコンシェル」のアプリをリリース

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

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

1. Absolute Resources To Flat Designhttp://www.9kdesigns.com/resources/flat-design-resources

フラットデザインの素材,配色,フォント,サンプルなどのサイトがまとめて紹介されています。

以下の項目に分けて,いろいろなサイトが紹介されています。

  • インスピレーションを得られそうな実例
  • アイコンなどのグラフィック素材
  • カラーパレットや配色ツール
  • フォント
  • WordPressのテーマ

図1 フラットデザインの情報源となるサイトいろいろ

図1 フラットデザインの情報源となるサイトいろいろ

2. 28 Free Resource Websites for Designers and Developers - DesignM.aghttp://designm.ag/web-designs/28-free-resources-for-designers-developers/

Web制作のための素材やツールを提供しているサイトを多数紹介した記事です。

コードを共有するCodePenやパターン画像を配布しているSubtle Patternsなど,有名なサイト中心に28のサイトが掲載されています。

図2 Web制作のための素材やツール配布サイト28選

図2 Web制作のための素材やツール配布サイト28選

3. Animated CSS3 Perspective Menu - webdesigncrowd.comhttp://www.webdesigncrowd.com/animated-css3-perspective-menu/

コンテンツ全体が立体的に移動して,隠れていたメニューが現れる効果を実装するチュートリアル記事です。

水平メニュー版と垂直メニュー版があります。レスポンシブにも対応していました。

図3 コンテンツ全体が立体的に移動して現れるメニューの作り方

図3 コンテンツ全体が立体的に移動して現れるメニューの作り方

4. 35 Examples of Using Vector Illustrations in Web Design | Splashnology.comhttp://www.splashnology.com/article/vector-illustrations-web-design/10356/

ベクターイラストを使ったWebデザインのギャラリーです。特にフラットデザインでは,アイコンやイラストなどのベクターツールで制作されたグラフィックスが多用される傾向がありますね。

フラットな塗りの,主線のないイラストが多数紹介されていました。

図4 ベクターイラストを使ったWebデザインのギャラリー

図4 ベクターイラストを使ったWebデザインのギャラリー

5. Minimalistic Text-Based Web Designs | Inspirationshttp://www.designerledger.com/minimalistic-text-based-web-designs/

ミニマルな文字中心のWebデザインのギャラリーです。

Webフォントが使える英語のサイトだからこそというのはありますが,シンプルでテキストメインでもしっかりデザインされているサイトばかりです。

図5 ミニマルな文字中心のWebデザインのギャラリー

図5 ミニマルな文字中心のWebデザインのギャラリー

そのほか,最近の記事の中から,気になる記事を2つ紹介します。

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

Home | Design in the browser with web fonts and real content ? Typecasthttp://typecast.com/

Typecastは読みやすいサイトを作るための,文字周りのデザインを確認するためのWebサービスです。Google Fontsなど多数のWebフォントに対応しており,フォントや文字サイズ,行間,背景色や文字色などをプレビューしながら調整できます。

見出し,リード文,本文など,あらかじめ用意されているHTMLをベースにデザインしていけますし,ほとんどの要素がカスタマイズできるようになっています。もちろん文字は打ち替えられますし,ベースのHTMLも自由に変更できます。

作成したデザインを共有する機能もあります。フォントを変更した複数パターンのデザインをチームで共有して検討するといった使われ方を想定してるようです。

図6 読みやすいサイトを作るための文字確認サービス

図6 読みやすいサイトを作るための文字確認サービス

今週の気になるWebネタ

NTTドコモ,iPhone向けに「しゃべってコンシェル」のアプリをリリースhttp://taisy0.com/2013/11/07/21204.html

NTTドコモが,iPhone向けの「しゃべってコンシェル」アプリをリリースしました。Siriと対抗する音声アシスタントの「しゃべってコンシェル」ですが,iPhoneユーザーならどちらも使えるようになったわけです。

ドコモのiPhoneユーザーでなくても使えるということで,⁠ドコモだけ」をウリにしていたドコモとしてはどうなんだろうという気もしますが,iPhoneを扱う以上こうなっていくのは自然な流れのようです。

ソフトバンクのお父さんアプリ(便利ツールが揃ってる)や,auの「アドレス帳変更ツール」アプリ(便利らしい)など,他のキャリアも独自開発アプリがiPhoneのキャリア選択のウリにはなっていないように感じます。ユーザーとしては便利なアプリが増えるのはうれしいんですけどね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入