http://readlists.com/820c6ff1/embed
slideshareが良かったので、参考文章もあとで読みたい
カテゴリー別アーカイブ: design
さてみなさん。ウェルカムページというのをご存知でしょうか？
最近は、メディア系が多いと思うのですが、開いた時にすぐに記事が見れなくて広告が流れてしまうアレです。
1日1回、そのページを開いた時に最初に表示されてしまう、ぶっちゃけそこで閉じる人が多いんじゃないかと疑ってやまないあのページです。
まぁ、世の中には気が長い人もいるんだなぁ、見習おう。
と、大人な解釈をして、今回はそのページに表示するアニメーションを作りました。
しかし、ここからが不毛な闘いの始まりだったのです…
規格
・600×480
・jpg/gif/sfh
・アニメーションの場合は10秒、1ターン
・50KBまで
まずは作ってみますよ
最近イラレ力が、少しずつですが上がってきたので、
イラレでフラッシュアニメ作ろうぜ！
http://help.adobe.com/ja_JP/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6358a.html
http://www.adobe.com/jp/webstudio/illustrator/illanimlyrs/index.html
これでめでたく、規格はカバーしました…！！
私 「じゃあ、これで御願いします(´ω｀*)★」
担当「すみません、フラッシュ動画の場合はflaファイルが必要です」
私 「？？？」
フラッシュ動画の場合はflaファイルが必要です
付け焼き刃は良くないですね。
反省しました。
規格(追加)
・600×480
・jpg/gif/sfh ※ sfhの場合はflaファイルも必須
・アニメーションの場合は10秒、1ターン
・50KBまで
イラレからでは、flaファイルは作成できそうにありませんでした。
ネット上で、flaファイルも作成できるツールを探しましたが、これだと、サイズオーバーになってしまうものばかり…
期限は差し迫っていたので、仕方なく、GIFの動かない画像で一旦御願いして、再度作業することに…
気を取り直して、別日。。。
AdobeのFlash Proが入っている人のマシーンを借りれる話だったのですが、正直、使ったことも無いマシーンでいきなり作業してサクサクできる気は全くしてなかったので、やや途方に暮れてました。
ら、Adobeのソフトをインストールしてくれるとのこと。
よかったよかった。
またしても、Adobe癖があるものの、触って行くうちに慣れてきて、いい感じになりました。
モーショントゥイーンを使って、レイヤーを重ねたアニメーションを作成！
http://1art.jp/flash/le/lesson2/lesson2.htm
しかし、フォントを画像にすると重かったので、FlashPro上でテキストを書きました。
ここで、あれこれやっていくうちにサイズがまたしてもオーバーしてたので、長さを変えたり、画像サイズを少し小さくしたりしたのですが、変わるのは、0.1KB程度でした。
なんだよーと思って、書いたテキストをいじってると、一気にサイズダウン…テキストは静止にして、大きめに書いた字は、ギザギザになっても良いよ！の設定をすると簡単お手軽です。
その他参考になりそうなサイト
http://qanda.rakuten.ne.jp/qa6581469.html
http://oshiete.goo.ne.jp/qa/1436725.html
というわけで、10秒ぐらいのアニメーションができました！やったね！
私 「できましたー(；≧∇≦) =3 ﾎｯ 」
担当「・・・すみません、細かな仕様があります。元から担当してたデザイナーの方に聞けば分かるんですけどねー」
私 「？？？？？？(´-ω-｀) 」
頂いた仕様は・・・PDF1枚に細かな規約がびっしり書いてありました。
（´・ω・`）.;:…（´・ω…:.;::..（´・;::: .:.;: ｻﾗｻﾗ..
しばらくやる気が復活するか不安ですが、次やるときは、flashをきちんと勉強してからトライすることにします。
http://m-school.biz/dev/flash-beginners/index.htm
ちなみに、ショートムービーは、.wmv形式がいちばん小さくできると聞きました。
参考程度に、ちょっと古いですが、ここにも細かに作成方法が書かれてました。
http://www.geocities.jp/rikwhi/nyumon/hp_tukurikata/hp_tuk_douga.html
今回の学び
あらかじめ仕様は確認せよ
当たり前体操てきなレベルですが…相手が先回りして教えてくれるとは限らないことを忘れてはならない。
特に既に一度基本的なことを共有そびれている相手なので、他にもあるんじゃないか？と疑う態度は必要だった。
知らない技術でいきなり作成すんな
ぬーん…特に歴史の古い言語の場合ですね。
「当然知ってるだろうこと」を共有されずに事が進み、大きく後退する可能性が高まり、もしくは全て無駄な作業に終わることがあります。
『SCHOOL OF GRAPHIC DESIGN』を読んで反省して、でもデザイン好きだと思う。
さ・て・と、今日も飲み会だったのに、
図書館に返却しなきゃいけないしなぁと思って、深夜の読書タイム。
『スクールオブデザイン』です。
デザインと仕事、108のコツ、というキャッチに惹かれて、
手に取ってしまいました。緊張しそうだけど、本物のデザイナーの方と
一度お話してみたい。。。
QUOTE & NOTE
007
感覚的に選んだら、
論理的に証明する。
論理的に選んだら、
感覚的に判断する。
これはすごくわかる気がする。
自分の中に感覚と論理は内在すると思ってるので、
使い分けて自分と対話していけば少しレベルが上がるかもだね。
全てを引用するのもいかんので、
まとめてみたのがこちら。
- 写真の構造は知れば知る程良い。
- 歴史を知る事で自分の中にストックを貯める
- 時にはコピーにも真剣になる
- ある程度自分の中でフォントの行間の基準を掴むために、
好きなフォントで文字を組んでみるといい。
「級数x1.6」など自分の中で基準を作ると作業がはかどる。 - デッサンは「観察力」と「客観力」を高めるために行う
- 字詰めはかならずモノクロレーザーで出力して確認する
私もコピーを書く事自体が増えてきたわけですが、
どうしてもこの文字を使いたいとか、
幅をこうしたいから、とかで文章をいじったこともあります。
文字組は、見た目を優先し過ぎて、読みづらいものも作って
しまったこともあるので、ここは反省。
「読みやすさ」を減らしてまで、それは優先することなん？
と自分に問いかけるようにしよう、うん。
026
文字組みのコツは、一言で終わる。
いいものを見るしかない。
なんていうか、よくわかんないけど、ある程度の数をこなさないと越えられない壁というものがあって、それが今なのかもしれないなと思った。とりあえず名刺のデザインでも片っ端からしてみようかな…
066
有名な人たちの名刺は
どれも、シンプルだった。
078
日本は識字率が高いので、
文字を使った広告が多い。
逆に海外は、識字率が低い場合、笑いに焦点を絞る事もあるそうです。
盲目的に真似てはならんのです。
よくよく考えると相反しそうな考えですね。
シンプルなものは、漢字だけのものが多かったので…
最後に、がつんと来た本気の言葉を引用しましょうか。
簡単に諦めない。
器用にこなさない。
楽をしようとしない。
強気でいく。本当にもう、
これ以上できないのか、
と常に考える
私、器用だから割と小技が増えて行くんですけど、それって良くないね。
デザインとか参考にするし、本質のほうをとらえようとしているつもりでも
猿真似だなぁとか、自分のアイデア枯渇してるなぁ、とか。
自分らしさってなんぞ？とか思うもの。
ともかく、いいものいっぱい見て、自分のなかにストックを貯めるのを
心がけるようにしよう、これからも。
ある程度時間をかければいいものを作れると思っていた事もあるけど、
逆に制約をつけることの大切さもわかってきました。
この本でところどころ出てくるイラレ&フォトショよりもMacだろ！って
流れに関して、Macでどのデザインソフトを使えば業務が効率化するのか
分からない…どのソフトのことだろう…
ぐぬぬ。ま、ともかくだ。コツはない。
THIS BOOK
『視覚マーケティングのススメ』
引用と気づき
- デザインってコミュニケーション
- 食べる事とデザインはとても共通点が多い。
- 一度体験してもらう（購買してもらう）とその魅力に取り異なり、もっともっと上質な者をと、常に顧客から求められる存在になる。
- ターゲットは絞ってトンマナを選ぶこと
→絞らなければ誰にも刺さらない - 価格を上げたければ、今ターゲットにしている市場とは別の市場にアプローチをかけていく
- 視覚マーケティングの戦略は、お客さんが商品を見た瞬間に「探し物はこれだった」と言ってもらうための戦略
- デザインとは投資である
- 顧客のニーズを知り、そのクラスやタイプを把握する
- 古い文体を使うと、そのまま、古い印象を与える
- つかむデザインと引くデザイン
→ いずれの場合も、ホワイトスペースとの兼ね合いが重要
→ その広告に期待する効果を決めておく - 企業のビジュアルマネジメント担当としてのChief Creative Officer (CCO)が現れるだろう(2008時点はない)
→ zyngaでCCO など、現在では職がある！
- デザインでブランディング強化
- デザインでインパクトのあるアドバタイジング
- デザインで効果的なプロモーション
- 地道にブランディングしておくことで、アドバタイジングとプロモーションの効果は、数倍〜数十倍にも
- ブランディングしたらプロモーションも忘れずに
- コミュニケーションのスピードは早ければ早い程いいので、それを視覚で実現する
→ 今のイメージを壊さずに新しい顧客に向けてブランドを格上げしたいのであれば、デザインを見直して、余白と文字組、ホワイトスペースとタイポグラフィーにこだわって投資してみる
デザインセンスを磨く5つのポイント
- 文字
・最低限「明朝体」と「ゴシック」を意識する。
・安易に無料のフォントを選択しない。 - レイアウト
・デザインとは、意図や意匠であり配置や設計のことを意味しています。
・整理されてみやすいレイアウトの特徴は、ディレクトリの整理がきちんとできていること。
・ジョブズのプレゼンの秘訣10か条より
第5条 忘れられない瞬間を演出する
第6条 視覚に訴えるスライドを用意する
第7条 1つのショーとして見せる - 配色
・何かが良かったからといって、そのまま転用しない
・伝えたいイメージで考える。
・ポップなのと格式高いのと、色合いは真逆 - トーン＆マナー
・雰囲気や世界観の演出 - コピー
・デザインとの融合が大事
・デザインとかぶってはいけない。
例）いちごの画像を使うのであれば、コピーは「おいしいいちご」でなく「至福の一粒」など。
デザインとは、今のあなたに足りないものを補って、強くあなたの背中をおしてくれる、力強いパートナーであり、あなたにとっての”戦友”なのです。
感想
最近、仕事でサイトを作らなきゃいけなくて、色々読み直してた中の一冊。こういう考えを忘れちゃいけないと思った。その場でパッと使えるレベルで頭の中に入れておきたい。まだ武器として機能するほど身にしみてなかったことに気づけて良かった。
そのアイデアが日本にないからといって、流行らないわけではない。
ただ、そこにないだけなのかもしれないのだから。
紹介した本
視覚マーケティングのススメ (アスカビジネス)
ウジ トモコ
クロスメディア・パブリッシング 2008-05-14
売り上げランキング : 107218
「デザイニング・インターフェース」勉強会 – 第7章
View more presentations from Tsutomu Kawamura
読書会をあまりやったことがないんだけど、この粒度で開催できればなと思った。
さらっと読んだだけでは得られない知識が得られそう。正直、こんなこと書いてあったっけ？と思ってしまった。これらのスライド全部見たら、また再読しよう。
『iPhoneアプリ設計の極意』
読んだ経緯
DevLOVEで盛り上がっていたこともあるが、良本だと聞いたので手に取ってみた。
iPhoneアプリ設計の極意
「これから作ろうとしているアプリは、どんな具体的な問題をほかのアプリとは違ったやり方で解決するのか。」（p15）
既にアプリは世の中に他出しているので、TODOアプリを作る時だって、他との差異を考えるのが大事。
それをiPhone上で（where）実行したいと思わずにはいられないかどうか
明確なニーズに対するエレガントな解決策になっているかどうかが決めて。筋書きを考えなきゃいかん。
何かを組み合わせて作りあげる時には、ユーザの行動を想定して作ると、全てやり直しになる可能性がある。誰も経験したことがないものだからこそ、プロトタイプは必要になる。
と、深く読んでいたのだが、図書館で借りていたので、やむなく返却。
TOOL
- iPhoneサイズのスケッチブック
=> イメージがつかみやすい気がするので欲しい。
紹介した本
iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン
Josh Clark 深津 貴之（監訳）
オライリージャパン
2011-06-18
売り上げランキング : 2120
スケッチノーティングしよう。
スケッチノーティングという概念を始めに知ったのが、このスライドでした。
View more presentations from Veronica Erb
これに出てくる記号は、自分のスケッチにも活かすようにしてます。
勉強会参加時、のレベルではないので、まだ挑戦してませんが、読書記録として何回か使いました。
整理されるし、なんていうか、おもろいです。
どうやって表現しようかなーと考えて行くうちにまとまるので。
View more presentations from Bryn Price
Let’s Sketchnote — MidwestUX 2012
View more presentations from Veronica Erb
下のほうは、ワークショップのスライドなので、そのまま転用して何かできたら楽しそうだ。
関連サイト
Be Designgineer
いくつか書いたので、公開していこうと思います、
自分で書いて、あーこういうパターンもあるのかーと比較できたりすると楽しそうなんですけどねぇ。
公開するとしたら、私も真似てflickerにしようかなぁと。
（というか、以前に公開したはずが、消えてて結構失意の中再考してます・・・><）
『新版graphic design』
quote …
- 「アイソタイプ」
- 「トランスフォーム」
：抽象的なアイデアや概念、言葉などを資格表彰に変換・移行させるとき、もっとも重要な視覚操作の原理となるべきものの考え方である。 - 数百の文字より１つのロゴDesign、写真、キャラクターのほうが早く強く伝わる事は誰しも経験している通りである。
- 書体、レイアウト、材質、印刷技術などのスキル、カメラマン、イラストレーター、CGアーティストなどのネットワークなどを縦横無尽に使ってコミュニケーションそのものをDesignしてゆく。
- ブランドの絆づくりにおいて、デザイナーの果たす役割は極めて大きい。
- 消費者のベネフィットを意識した携帯制や開け方の機能など、商品コンセプトを反映させたコンストラクションの要素も、その商品の大きな特徴となる。
誰もがムリなく扱えるコンストラクションを開発するためには、素材から加工まで、さまざまな技術を集結する必要がある。
『Designing Interfaces, 2nd Edition』
「Designを勉強し始めるとしたら、まずどの本を読めばいいですか？」
と聞いたとき、返ってきた答えがこの本だった。
暗記するほど、読みこなす必要がある・・・！
参考情報として上がってたWebサイトをハテブしてみました。
p523 参考情報ウェブサイト
note…
後で書きます。
『Balance in Design』
amazonの評価がよかったので、読んでみました。
think …
以前、ちらしを作った事がある。
そのときに、なんとなく座りが悪いなぁと感じる事が何度もあった。
何が違うんだ？と思いながら、他のちらしやWeb、『すべての人に知っておいてほしいデザインレイアウトの基本原則 』とか読んだりした。
ある程度は変わったかもしれないけど、でも、小手先だなぁと考えながら、期限になり、諦めてしまった。
その答えが、この本にあったと思う。
もしかしたら、他の本にも書いてあったかもしれない。
この本が、ただ「幾何学」とデザインの関係性を一貫して説いていたがゆえに、やっと私も気づけたのかもしれない。
設計されていないのに居心地のいいデザインなど、存在しないのかもしれない。
なにげに目にするピクトグラム。例えば人の形だとして、それが平行でなかったり、腕の太さや長さが一貫してなかった場合に、なんとなく気持ち悪さを感じ、統一されていることに無意識レベルで心地よさが提供されるのだ。それは神経質とかそういうレベルじゃなかったのかもしれない。
初めてちゃんとしたデザインの本を読んだような気がした。
デザインって奥深いですね。
100%凝って作りたいと思った時に、あとどれだけの知識と技術を身につける必要があるのか、先が遠いなぁと思いつつ、ワクワクする部分もあります。デザイナーすごぃ！！
Be a designgineer 