週刊Webテク通信

2015年11月第3週号1位は、モバイルファーストでWebサイトをデザインする方法、気になるネタは、スマホ画面に直接押す電子スタンプサービス「PAS+」

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

1. Designing Websites Using A Mobile First Approachhttp://www.designyourway.net/blog/design/designing-websites-using-a-mobile-first-approach/

モバイルファーストのアプローチでWebサイトをデザインする方法について解説しています。

  • なぜモバイルファーストの戦略が必要なのか
  • 適応性
  • Unicodeの記号の利用
  • 多くのデバイスに適用できる総合的なスタイル
  • JavaScriptライブラリの利用
  • モバイル向けのナビゲーション
  • レスポンシブな画像
  • 優れたユーザー体験を提供する
  • 好き嫌いの問題じゃない

Unicodeの記号の利用というのは、星マークなどは画像やアイコンフォントなどを使わなくても、Unicode Symbolとして用意されている文字を使えばいいじゃないかということです。

図1 モバイルファーストでWebサイトをデザインする方法
図1 モバイルファーストでWebサイトをデザインする方法

2. How to Create Skewed Edges With CSS - Hongkiathttp://www.hongkiat.com/blog/skewed-edges-css/

CSSで領域の端を斜めにする方法を解説した記事です。背景色の付いた領域の水平方向の区切りをtransformで斜めにしています。

掲載されているSassのmixinを使えば、簡単に向きや角度を設定できます。

図2 CSSで領域の端を斜めにする方法
図2 CSSで領域の端を斜めにする方法

3. Collection of Free After Effects Mockups - Designmodohttp://designmodo.com/after-effects-mockups/

Adobe After Effectsで作られた、ユーザーインターフェイスの動くモックアップをまとめた記事です。

After Effectsで実際に編集できるファイルが提供されているので、参考にしたり素材を入れ替えたりしてアニメーションを作れます。

After Effectsだけでなく、Photoshopのアニメーション機能を使ったものもありました。

図3 動くユーザーインターフェイスのモックアップ素材いろいろ
図3 動くユーザーインターフェイスのモックアップ素材いろいろ

4. Inspiring Examples of Subtly Animated Logos in Web Designhttp://speckyboy.com/2015/11/09/subtly-animated-logos/

アニメーションするロゴのギャラリーです。ロゴにちょっとした動きを与えるのがWebで流行っているようですね。

以下の2つの記事は、ロゴをSVGとCSSを使ってアニメーションさせるチュートリアルです。

図4 アニメーションするロゴのギャラリー
図4 アニメーションするロゴのギャラリー

5. What’s new for designers, November 2015 | Webdesigner Depothttp://www.webdesignerdepot.com/2015/11/whats-new-for-designers-november-2015/

Webデザイナーや開発者に役立つツールやアプリ、素材、情報をまとめています。PhotoshopやSketchのプラグインやフォントなども掲載されていました。

段ボールで作られた畳んで持ち運べる机「Refold」がかなり気になります。

図5 Webデザイナーや開発者に役立つツールや素材など
図5 Webデザイナーや開発者に役立つツールや素材など

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

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

FontReachhttp://www.fontreach.com/

FontReachは、フォント名で検索するとそのフォントが使われているサイトのリストを表示するWebサービスです。

GoogleやFacebook、Twitterのような人気サイトが上位に表示されるようになっています。サイト名から探すことはできないのですが、検索結果に出てきたサイト名をクリックすると、そのサイトで使われているフォントの一覧も表示できます。

フォントのランキングを表示して、そこからそのフォントを使っているサイトを探すこともできます。ランク1位のArialは60万以上のサイトで使われているとありますので、相当多くのサイトのフォント情報をデータとして持っているようです。

図6 Webサイトで使われているフォントが分かるサービス
図6 Webサイトで使われているフォントが分かるサービス
図7 Arialでの検索結果からFacebookを選んだ例
図7 Arialでの検索結果からFacebookを選んだ例

おすすめ記事

記事・ニュース一覧