週刊Webテク通信

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

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

ネットで見かけた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 シンプルなファイル転送サービス

今週の気になるWebネタ

「Ameba」が女子中高生向けスマートフォンサービス強化を目的に,teens事業部を新設 女子中高生向けスマートフォンプラットフォーム構築へ | 株式会社サイバーエージェントhttp://www.cyberagent.co.jp/news/press/2012/1205_1.html

「Amebaスマホ」のCMでおなじみ,スマートフォンに注力しているサイバーエージェントですが,スマートフォンを使う女子中高生向けのサービス強化のために専用の「teens事業部」を作ったそうです。

なにやら楽しそうな部署です。ティーンズ雑誌をいっぱい読んで勉強するんでしょうね。グループインタビューで女子中高生とお話しするのも仕事ですね。疲れそうですが楽しそうです。グループインタビューの結果は,ぜひ公表してほしいですね。

「スマートフォンサービスNo.1を目指してまいります」というサイバーエージェントのリリースを見て思い出すのは,⁠まずはスマートフォン事業でNo.1」といったNHN Japan,ネイバー,ライブドアの3社が経営統合したときの言葉。これは2012年のはじめだったわけですが,その後LINEが大ヒットして本当にNo.1といってもいい状態になりました。およそ1年遅れでのサイバーエージェントのNo.1宣言にも注目しましょう。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入