週刊Webテク通信

2012年12月第2週号1位は、Retina対応画像をAdobe Fireworksを使って作成する方法、気になるネタは、「Ameba」女子中高生向けスマートフォンサービス強化を目的に、teens事業部を新設

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

1. Design Cutting Edge iOS Apps With Adobe Fireworks | Smashing Fireworkshttp://fireworks.smashingmagazine.com/2012/12/03/design-ios-apps-with-adobe-fireworks/

iOSアプリ用の画像作成をAdobe Fireworksを使って行う方法を紹介しています。Retinaディスプレイ用に2倍サイズの画像で作り始めるのがポイントです。アプリだけでなく、iOSもターゲットとしたWebサイトの素材作成時にも応用できるテクニックですね。

Fireworksで作業する場合、まず高解像度(iPhone 4/4S用なら640×960 px)でファイルを作成しておき、最後に別途半分に縮小した画像も書きだすというワークフローが推奨されています。

デザイン作業をしていく上での注意点として、以下のような内容が紹介されています。

  • できるかぎりベクター形式の図形を使う
  • Photoshopライブエフェクトではなく、Fireworksのライブフィルター(プロパティパネルにあるフィルター)を使う
  • 図形の幅や高さを偶数にする(最後に半分に縮小した際にピクセル数が割り切れるように)
  • パターンは繰り返したとき継ぎ目の無い画像を用意する
  • 高解像度のビットマップ画像を使う

最後にアートワーク全体を半分に縮小するわけですが、ぼけてしまったピクセルの修正や角丸のサイズ調整などについても解説されています。

図1 Retina対応画像をAdobe Fireworksを使って作成する方法
図1 Retina対応画像をAdobe Fireworksを使って作成する方法

2. Responsive Web Design: Fresh Tools, Articles and Tutorials | Splashnologyhttp://www.splashnology.com/article/responsive-web-design-fresh-tools-articles-and-tutorials/7264/

レスポンシブWebデザイン関連の新しいツール、チュートリアル、関連記事をまとめています。

グリッドシステムのフレームワークや、レスポンスな画像スライダーなども紹介されていました。

図2 レスポンシブWebデザイン関連記事のまとめ
図2 レスポンシブWebデザイン関連記事のまとめ

3. 20+ Best Collection of Bootstrap Skin | Dzinepresshttp://www.dzinepress.com/2012/11/20-best-collection-of-bootstrap-skin/

Bootstrapのスキンを各種紹介しています。すっかりスタンダードになったBootstrapだけに、こういった関連のものが多数登場しているんですね。

背景色が黒のものや青のものなど、豊富なスキンがそろっています。

図3 Bootstrapのスキンを各種紹介
図3 Bootstrapのスキンを各種紹介

4. Interesting New Web Designs That You Should Check Outhttp://www.designyourway.net/blog/inspiration/interesting-new-web-designs-that-you-should-check-out/

新規性のあるWebデザインのギャラリーです。

一番手として紹介されているマイクロソフトのサイトですが、日本のサイトも同様のレスポンシブなデザインになっていますね。

図4 新規性のあるWebデザインのギャラリー
図4 新規性のあるWebデザインのギャラリー

5. グラフィカルな写真コンテンツを効果的に見せる!ランダムな配置のグリッドレイアウトのサイトデザインをまとめました | Webデザインクリップhttp://webdesignmatome.com/webdesign/grid-design

画像中心のブロックレイアウトで、並びにちょっと不規則性を取り入れているサイトデザインをまとめた記事です。

1つだけですが、国内の事例も紹介されています。

図5 ランダムな配置のグリッドレイアウトのサイトデザインまとめ
図5 ランダムな配置のグリッドレイアウトのサイトデザインまとめ

そのほか、最近の記事の中から、気になるツールやガジェットの記事を紹介します。

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

sDrop エスドロップ | シンプルファイル転送https://sdrop.jp/

sDropは、簡単な操作で300MBまで扱えるファイル転送サービスです。ドラッグ&ドロップでファイルを追加して「ファイルを送る」ボタンを押すと、ダウンロードURLとパスワードが生成されます。

ユーザー登録などは不要で、すぐに使うことができ、広告なども入っていません。

この手のサービスは海外のものが多いのですが、インターフェイスが英語だと怪しいサイトに思われたり、分かりにくいと言われてしまうことが多いです。その点これは日本語のサービスなので、受け取る側が迷うことも少ないでしょう。

ファイルは72時間後か5回ダウンロードされたときにサーバーから削除されます。メールアドレスを登録しておくと、ファイルがダウンロードされたときや削除されたときに通知をもらうことができます。

図6 シンプルなファイル転送サービス
図6 シンプルなファイル転送サービス

おすすめ記事

記事・ニュース一覧