Browsing articles from "1月, 2010"
1月
25
2010

CSS Nite in Ginza, Vol.43

えーと。。。どうもご無沙汰しております。

最近ちょこちょことセミナーに参加しているので復習も兼ねて今後はまとめたいと思います。

2010年1月21日(木) CSS Nite in Ginza, Vol.43

【2009年のデザイントレンドのまとめ】

■Wen2.0風のリアルな立体的なアイコンはもう古い

アイコンはシンプルになりうつある傾向にある。

モチーフのデザインはもちろんカラーも単色だったりと変わりつつあるそうです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://mutantlabs.co.uk/
http://www.ergpa.com.au/
http://www.mochimedia.com/

■ページ全体に世界観を

背景を一つの世界やデザインしたヴィジュアル重視のレイアウトが増えてきている。

今ならまだ旬なので取り入れるべき!だそうです。。

ディスプレイが大きいからこそ出来るデザインです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.blossomsvillage.com/

http://blueacorn.com

http://enviramedia.com

■明度/彩度のコントロール

背景色が白っぽく見えますが、グレーを混ぜているので真っ白ではありません。

グレーに青を入れて馴染ませ、明度を上げて目立たせています。

テキストはページ全体の色とは違う色を少し使ってアクセントをつけています。

Positive Life - 「伝える」 webデザイナーを目指す夢日記- http://www.hdlive09.co.uk/

■流行の色は「青」

Twitterを意識した青を取り入れたサイトが多くなったそうです。

日本でもTwitterと連動したイベントや企画もかなり増えましたよね。

気軽に参加出来るので非常に興味深いです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.mobilemysite.com/

http://www.oysterdesign.co.uk/

http://www.unuidesign.com/

■皮素材をし使用したテクスチャー

皮の素材感やステッチなどを取り入れたデザインが増えてきている。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://markhadley.com/

http://www.uiredesign.com/

http://iamdanielmarino.com

■立体的なリボン(巻き込みリボン)

帯のような立体感のあるリボンでメニューなどを作る。

タイトルなど仕切りとして使用する場合が多い。

W3Cのオフィシャルサイトがリニューアルして取り入れているのを見るとかなり説得力がありますね!

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://cuisine-saine.fr

http://www.chillink.com/

http://www.w3.org/

■アルミの質感はノイズがポイント

ただのグラデーションではなく、photoshopでガウスをかけたりなどかけたりノイズを加えたりしています。

背景にもグラデーションを使い、ページ内のコンテンツにも薄いグラデーションを使い立体感を出しています。

また色使いで小道具を引き立たせています。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://osdnetwork.org/

■テキストはより大きく

これもディスプレイが大きくなってきた傾向の影響でしょうか?

情報量(文字量は)減る傾向にあるそうなので完結に文章をまとめる事が大切になりそうですね!

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.bigspaceship.com/

http://www.boagworld.com/

http://pwstudio.co.uk/

■CSSによるドロップシャドウ

システムフォントをデザインする傾向があるそうです。

mac風のデザインを意識しているのかもしれません。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.letterllama.com/

http://fusionads.net

http://wemake.no/

■フォームをデザインする

大きさはもちろんアイコンで分かりやすく使いやすくなっています。

2009年にgoogleもリニューアルの際に検索のテキストフォームを大きくしたそうです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://tearoundapp.com/

http://gandrweb.com/

http://culinaryculture.com
■java、jQueryによりメインページをインタラクティブに。
日本でもここまで大きなイメージが切り替わる事はないですけど、

コーポレートサイトがトピックス別に切り替わったりしますね。

写真も四角い写真を載せるだけではなく、まる~い感じの写真を使ったデザインがとってもオシャレです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://thingsthatarebrown.com/

http://www.pointzero.ro/

http://www.robalan.com/

■噴出しを利用したデザイン

Twitterの影響はWEBデザインをこんなに動かすのですねぇ。。

社会をも動かす恐るべしTwitterの力。。。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.uilcc.org/

http://www.ebowersdesign.com/

http://f91w.com/

■グリッドデザイン

小さな段組を新聞の様に配置したデザインが流行っているそうです。

全体的に統一感を持たせ、写真以外はあまり色を使っていません。

なので目立たせたい時やリンク先などに色を使うそうです。

写真も背景色を揃えて撮影しているのでより一層統一感が増します。

見易さはもちろんユーザーの環境に合わせてインタラクティブに段組が移動します!

グループワークをした時にこのサイトを知ったのですが、うちのチームのリーダーが作ったページはグリッドデザインに巻き込みリボンも採用されていたなぁ。。

流石リーダー!!素敵過ぎます!!

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.creativedepart.com/

http://jpeople.dropmobile.com/

http://reformrevolution.com/

http://www.conceptconception.com/

http://www.d-department.com/jp/

■伝統的グローバルサイト

海外のサイトの伝統として?地球を使うサイトが多いそうです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.baosteel.com/group_e/index.asp

■グリッド+ピクチャーバック

大きな写真を背景に使用し、グリッドメニュー(半透明だったりもする)が特徴です。

画面が写真より大きいサイズの場合は背景は黒になっています。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.nmfn.com/

http://www.gs.com/

■日本的Webデザイン

日本の上場企業(3747社)サイトは隙間があまり空いていない。(海外のサイトとの大きな違い)

右上辺りが特徴的で大体のサイトは【文字の大きさ・サイトマップ】などがまとめられている。

太い線でフッターとコンテンツの間を区切る。新着情報が大きい。

そういわれると確かに日本のコーポレートサイトはほとんどレイアウトが一緒ですね。特に銀行のサイト。

流れに乗るというよりは孤立できない日本人ならではの文化な気がします。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.takano-net.co.jp/

http://www.eidai.com/

■リキッドレイアウトor800px+3カラム型

自治体(県市町村)のサイトはリキッドデザイン(画面を100%使ったデザイン)

もしくは800px以内で作られたサイトが多いそうです。

3カラムでまとめられたサイトもよく見られるそうです。

原さん絶賛の行田市のサイトはただ文字を並べるだけではなくリンク先の内容に合ったイラストを使い、

リンク(メニュー)の並べ方も年齢別(生まれてから亡くなるまで)になっているなど細かいところまで綺麗にまとめられています。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.city.gyoda.lg.jp/
http://www.city.kaizuka.lg.jp/

■ファーストビューに場所を表示

県市町村のサイトのファーストビューに地図を配置しているサイトも多いそうです。

インパクトもあり北海道などの広い地域では目で見て確認出来るので覚えてもらいやすいかもしれませんね。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.city.ashibetsu.hokkaido.jp/

■企業のTwitter利用

最近は日本でもTwitterとのコラボコンテンツが増えてきましたね。

ロート製薬では肌ラブ by 肌研(ハダラボ) という面白い企画を行っています。

海外の企業のサイトのトップページのどこかに見覚えのある青い鳥がいる事も多いそうです。

Positive Life - 「伝える」 webデザイナーを目指す夢日記-  Positive Life - 「伝える」 webデザイナーを目指す夢日記-
Positive Life - 「伝える」 webデザイナーを目指す夢日記-

http://www.topsitetally.com/

http://lemonstandapp.com/

http://hanson.net

■おまけ:他メディアでのトレンド

http://webdesignledger.com/tips/web-design-trends-for-2010
http://designtutorials4u.com/top-10-web-designtrends-for-2010/

http://webtoolkit4.me/2009/08/15/inspiration-web-design-trends-in-2009-and-probably-2010/

http://www.cyberdesignz.com/blog/website-design/8-web-design-trends-2010/
うぬぅ。。。。内容が濃すぎてまとめるのが大変だ!!

大体振り返りが出来たのでこのあたりでまとめに。。。

当たり前の事ですが全てにおいて理由がある。

その事を改めて実感しました。

個人の感覚で「なんとなく」な根拠のないデザインを作っていても意味がないですよね。

これって大切な事ですよね。。

とことん比較・立証するべし!!以上です!!!

1月
25
2010

モバイルFLASH

モバイルFLASHメモ

推奨サイズは230×240

■インライン再生

操作が出来ない(HTML+SWFで再生)

■インタラクティブ再生

ボタンで操作が出来る(swf単体で再生)

1月
25
2010

Flash CS5ではフルFlashで携帯電話向けコンテンツが作成でき、iPhoneにもアプリと

AdobeCS5では、フルFlashで携帯電話向けコンテンツが作成でき、iPhoneへもアプリとして書き出せる!そうです。ということは、Flashを押さえれば、今はそれぞれで異なるスマートフォン開発も統一して行うことが出来るということでしょうか?

ここ連日行われているAdobe MAX 2009イベントにて発表されている、次回発売されるAdobeCS5シリーズ情報。

プロ向け写真編集ツールPhotoShopに関しては、今までパスやらスタンプツールを使いこなす必要があったPhotoShopの写真合成が、大幅に楽になるらしいという動画が先日アップされてましたが、何とFlashの方も大きい動きがあったそうで。

それが今回のビッグニュース

1、Flash CS5ではフルFlashで携帯電話向けコンテンツが作成できる

2、iPhoneにもアプリとして書き出せる!

という話です。

ほんまかー?

「1、Flash CS5ではフルFlashで携帯電話向けコンテンツが作成できる」について、携帯電話のスペックは年々PCに追いついて来てはいますが、一方で最近のFlashはBlu-ray並の動画が配信できるというのも売りの一つになっていたはず。

そういった点も含めて「フル」Flashが登載されたとしてもまだ実用レベルで動く物なのか、処理的にきついんじゃないのかなと思うのですが、どうでしょうか?

「2、iPhoneにもアプリとして書き出せる!」について、RealPlayerやPalmがiTunesと繋がります!とうたっていても、Appleから許可を得て搭載した機能では無いだけにiTunesの次のアップデートからは接続できなくなった※という話がありました。

※ただ両メーカーともすぐにその新バージョンに対応したものを出しましたが。

まぁC#と.NETでiPhoneアプリが使える!という開発ソフトもありますし、Apple公認(もしくは黙認)ソフトなら問題ないのですが、OSバージョンアップしたらFlashアプリが動かなくなるという展開なら困りますね。どうなんでしょう?

不安点はさておいて、簡単なスマートフォンアプリを開発するならFlashで決まり?!

いまスマートフォンでバイナリレベルのアプリを開発するなら

iPhone・・・Object C

Android・・・Java / C++

Windows Mobile・・・VC++(もしくは.Net関連)

といった言語に精通する必要があるのですが、もしそれぞれの環境でFlashが快適に動き、且つアプリ側もマシンスペックを要求されないものであれば、クロスプラットフォーム開発がよりし易くなるのでしょうか?!、登場が楽しみです!
・・・Action Scriptまた覚えないとなー。

引用

http://kuze.tsukaeru.jp/tsunezune/archives/2009/10/000349flash_cs5flashiphone.shtml

1月
25
2010

FLASHショートカット

FlashDevelopのショートカット

http://littlepad.heteml.jp/blog/category/flash-develop

Flashで覚えるべきショートカット

http://mobilef.jugem.jp/?cid=10

Flash操作を17倍豊かにする90のショートカット

http://www.yama-ko.net/blog/?p=54

年会費無料のクレジットカードなら「楽天カード」