週刊Webテク通信

2013年10月第2週号 1位は,iOS 7向けデザインのためのガイド,気になるネタは,ぺんてる『AnkiSnap』発売,蛍光ペンと専用アプリでデジタル暗記シートを作成

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

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

1. Designing for iOS 7: Guide to Getting Started - Designmodohttp://designmodo.com/ios-7-design-guide/

iOS 7向けデザインのためのガイドです。iOS 7のデザインに合わせたインターフェイスを作るためのヒントが紹介されています。

以下の項目に分けて解説しています。

  • フラットに考える
  • 文字に焦点を当てる
  • ボーダーをなくす
  • 視差効果を考える
  • レイヤーを使って奥行きを作る
  • アイコンに気を遣う

賛否両論あるiOS 7のUIですが,iOS 7のテイストに合わせつつ,より良いUIを作り上げることが今後求められるのでしょう。

図1 iOS 7向けデザインのためのガイド

図1iOS 7向けデザインのためのガイド

2. 30 Inspiring Mobile App Wireframes | OmahPSDhttp://omahpsd.com/2013/10/mobile-app-wireframes/

モバイルアプリのワイヤーフレームの実例を大量に紹介した記事です。

手書きのものもありますが,デジタルのものが主流です。モバイルアプリの場合,こうやってじっくりと画面遷移を考える必要があるということでしょう。

図2 モバイルアプリのワイヤーフレームの実例集

図2 モバイルアプリのワイヤーフレームの実例集

3. 10 New Popular jQuery Plugins You Should Check Out - Designbeephttp://designbeep.com/2013/10/09/10-new-popular-jquery-plugins-check/

最近の新しいjQueryプラグインを10個紹介しています。

縦に長いページをスクロールで見せていくタイプのサイトに利用できるものが複数あります。そういったサイトがやはり最近のトレンドなんですね。

図3 最近のjQueryプラグインいろいろ

図3 最近のjQueryプラグインいろいろ

4. IcoMoon, Fontello and Fontastic.me: Best of Icon Fonts - noupehttp://www.noupe.com/css/icomoon-fontello-and-fontastic-me-best-of-iconfonts-79457.html

メジャーなアイコンフォントサービス3つを取り上げています。

IcoMoon,Fontello,Fontastic.meの3つを比較しているのですが,最後に取り上げているFontastic.meがイチ押しのようです。Fontastic.meは,IcoMoonとFontelloの良いところを併せ持っていると評されていました。

HTML5のdata属性を利用したアイコンの設定ができるところも,Fontastic.meの優れた点とのことです。

図4 メジャーなアイコンフォントサービス3つの比較

図4 メジャーなアイコンフォントサービス3つの比較

5. A Collection of Separator Styles | Codropshttp://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/

「区切り」をデザインした実例と作成するためのチュートリアルです。

縦長なシングルページサイトなどでよくある,コンテンツエリア毎に色が付いている場合に有効な,区切りをデザインするテクニックが紹介されています。

区切り部分を曲線にしたり,ギザギザにしたりと,いろんなパターンがありました。

図5 水平の区切り部分をデザインするテクニック

図5 水平の区切り部分をデザインするテクニック

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

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

Portfoliobox - Your online portfolio websitehttp://www.portfoliobox.net/

Portfolioboxは,その名の通り自分のポートフォリオサイトを作れるサービスです。画像ギャラリーを中心に,テキスト中心のページや動画の入ったページなどを追加していくことができます。

無料版では40枚(日本語の説明では50枚になっています)までの画像しかアップできないようなので,お試し版という扱いでしょう。プロ版は年間$69で,1000枚の画像と1000ページのページが作れるようになるほか,いろいろと便利な機能が追加されるようです。

画像ファイルを複数まとめてドラッグ&ドロップするだけで,簡単に画像ギャラリーを作成できます。画像のキャプションもあとで一つ一つに追加できます。閲覧時には,画像を詳細表示すると,Facebook,Twitter,Pinterestでシェアするボタンが表示されます。スライドショーのUIもいくつかのパターンから選択できます。

EC機能も持っており,画像に値段を付けるだけでカートボタンが追加されます。カートに入れるまではテストできたのですが,EC用のセッティング(店舗の住所などの情報や送料や税などの設定)をしないとその先は使えませんでした。決済はPaypalです。

似たようなサイトはたくさんありますが,簡単に画像スライドショーを作れるサービスとして,いろいろな使い道がありそうです。サイト全体をパスワードで保護することもできるので,プライベートな画像共有にも使えるかもしれません。

図6 ポートフォリオサイトを作れるサービス

図6 ポートフォリオサイトを作れるサービス

今週の気になるWebネタ

ぺんてる『AnkiSnap』発売,蛍光ペンと専用アプリでデジタル暗記シートを作成 - Engadget Japanesehttp://japanese.engadget.com/2013/10/07/ankisnap/

蛍光ペンでなぞったものを撮影し,暗記シートとして使えるアプリがぺんてるから登場しました。アプリは無料で蛍光ペンを販売するという,キングジムのショットノートなどでおなじみのビジネスモデルですね。アプリがあれば,他社製の蛍光ペンでも「ある程度は使えてしまう」ようです。

デジタルとアナログのうまい融合だなと感心していたのですが,すでにsmarecoという類似の商品が出ていました。また,そもそもマーカー&シートで暗記ノートを作るというのは,チェックペンというのが元祖で,こちらはゼブラの製品です。

スマートフォンはいつでも持ち歩きすぐに取り出せるものなので,アナログなものとの相性はいいですよね。ARも技術的には以前から可能だったんでしょうが,スマートフォンがあってこそ普及してきたんだと思います。スマートフォンアプリ&アナログなものが連動するプロダクトは,なんかホッとする要素がありますし,今後もどんどん増えてくるでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入