週刊Webテク通信

2013年6月第4週号1位は、スキュアモーフィックデザインの長所と短所、気になるネタは、アマゾンがクラウドファンディングを開始!「Amazon Birthday Gift」

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

1. Skeuomorphic design | The DesignPin Bloghttp://designpin.co/skeuomorphic-design/

スキュアモーフィックデザインの長所と短所をまとめた記事です。

iOS 7の発表により、ますますフラットデザインが注目を集めています。現実の物をリアルに模したスキュアモーフィックデザインは、フラットデザインと対極するものとして語られることが多いですが、時代遅れで過去の遺物になったわけじゃないということを考察しています。

スキュアモーフィックデザインの長所
  • 視覚的に面白い
  • 親しみやすい
  • 年齢を問わず使える
  • 雰囲気を伝えられる
スキュアモーフィックデザインの短所
  • 失敗しやすい
  • 操作性を妨げる場合がある
  • 革新的でない
  • 全てのケースに合うわけじゃないけれど、無味乾燥なフラットデザインやミニマルデザインの代わりにスキュアモーフィックデザインを選ぶこともできるといった結論でした。

    図1 スキュアモーフィックデザインの考察記事
    図1 スキュアモーフィックデザインの考察記事

    2. 40 beautiful flat ui design inspirationhttp://smashinghub.com/40-beautiful-flat-ui-design-inspiration.htm

    フラットなUIデザインの実例を多数紹介した記事です。

    以下の項目に分けて、事例を豊富に掲載しています。

    • ビジネス(アプリやソフトウェア)
    • エージェンシー
    • ポートフォリオサイト
    • カンファレンス
    • WordPressテーマ
    • モバイル
    • eコマース
    • ダッシュボード
    図2 フラットなUIデザインの実例を多数紹介
    図2 フラットなUIデザインの実例を多数紹介

    3. iOS 7 Redesigns | Enfuzedhttp://enfuzed.com/ios-7-redesigns/

    世界中のデザイナーがiOS 7を勝手にリデザインした作品の数々を紹介した記事です。

    iOS 7のデザインコンセプトをふまえつつアイコンをリデザインしたものが多く、こっちの方がいいよなぁと思うものばかりです。

    なお、iOS 7異説:「素人くさいアイコンをデザインしたのはだれ?」というZDNet Japanの記事によると、発表されたiOS 7は開発途中のもので、アイコンなどのビジュアルが今後変更される可能性はあるようです。

    図3 iOS 7をリデザインしてみた作品の数々
    図3 iOS 7をリデザインしてみた作品の数々

    4. 30 Best UI/UX Pinterest boards You Must Follow | Inspiration | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/06/best-uiux-pinterest-boards-you-must-follow/

    ユーザーインターフェイスやユーザーエクスペリエンスに関するPinterestボードを多数紹介しています。

    前回紹介した、Pinterestでデザイン関連のボードを作っているユーザーのリストとともにフォローすれば、Pinterestライフがより充実しそうです。

    図4 UI/UX関連のPinterestボードいろいろ
    図4 UI/UX関連のPinterestボードいろいろ

    5. 25+ Great Bootstrap Tools and Generators Useful for Web Developershttp://designdrizzle.com/25-great-bootstrap-tools-and-generators-useful-for-web-developers/

    Bootstrap関連のツールやジェネレーターを集めた記事です。

    CSSフレームワークの中でも、関連ツールの多さではBootstrapがダントツですね。

    図5 Bootstrap関連のツールやジェネレーター
    図5 Bootstrap関連のツールやジェネレーター

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

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

    Create Your Icon Fonts - Free icon Vectors - Fontastichttp://fontastic.me/

    Fontasticは、Webフォントとして使えるアイコンフォントを作成できるサービスです。

    あらかじめ用意されている1700種類ものアイコンから、必要なものを選んでWebフォントをつくることができます。また、自分で作ったSVGファイルを読み込むことも可能です。

    アイコンを選んだ後、フォントとしてどの文字に当てはめるかと、CSSで指定する場合のクラス名がカスタマイズできます。ダウンロードしたファイルには、フォントファイルだけでなくHTMLとCSSも入っているので、CSSでの設定方法がすぐに分かります。

    図6 アイコンWebフォントを作成できるサービス
    図6 アイコンWebフォントを作成できるサービス

    おすすめ記事

    記事・ニュース一覧