週刊Webテク通信

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

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

ネットで見かけた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を選んだ例

今週の気になるWebネタ

スマホ画面に直接押す電子スタンプサービス「PAS+」--バリューコマース - CNET Japanhttp://japan.cnet.com/marketers/news/35073411/

飲食店などがリピーターを増やすために配布するスタンプカードをデジタル化し,スマートフォンで利用できるようにするサービスが登場しました。

スタンプ型の機器でスマホの画面を押すところがいいですね。店員とお客さん両方にとってわかりやすいはずです。間違えて2回押してしまった場合に簡単に取り消せるのかなど,イレギュラーな対応に柔軟に対応できるのかも気になります。

サービス提供側にうまみがあるビジネスなので,同様のサービスを提供する企業がたくさん出てくるような予感がします。日本の電子書籍のように,同種のサービスが乱立するとユーザーにとっては不便なことが多いので,そうならないことを期待したいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入