週刊Webテク通信

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

ネットで見かけた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 読みやすいサイトを作るための文字確認サービス

おすすめ記事

記事・ニュース一覧