(stripe.zip:571KB)
Zipファイルを解凍後、パターンファイルをPhotoshopにドラッグ＆ドロップするとパターンが追加されます。
商用利用OK、印刷OKです。再配布はNGです。ご使用の際の報告やリンク、著作権表示は不要です。お気軽にお使いください。
コーディングは、Firefoxのアドオン、HTML Validatorでチェックします。
まずはHTML Validatorをダウンロードします。
こちらの右下に赤で×印があると、コーディングにミスがあるということを示しています。
（緑のチェックマークは、ミスがないことを表しています。）
赤の×印をダブルクリックして、ソース画面を開きます。
エラーのある行番号と、そのエラー内容がわかります。内容は英語なのですが、なんとなくわかるはず。
この場合は、ID名が重複しているよ、ってことです。
このエラー内容をコーダーさんに伝えて、修正をしてもらいます。
JavaScriptのエラーは、Firefoxのアドオン、Firebugでチェックします。
対象ページで「F12」キーを押し、「有効化」をクリックします。
タブメニューの「コンソール」をクリックすると、エラー内容が表示されています。
（エラーがなければ何も表示されません。）
コーダーさんに、エラー内容を伝えます。画面をキャプチャしたり、印刷したりして、こんなエラーが出てるんだけど、って伝えてあげると良いかと思います。
Altは音声ブラウザ用とSEO対策用に入れるもので、ほとんどの企業サイトでは入れるのが基本になっていると思います。
これがきちんと正しく入っているかを調べるために、FirefoxでもAltをポップアップ表示できるようにする「Popup ALT Attributes」が便利です。
ダウンロード後、画像にマウスオーバーをすると、Altが表示されるようになります。
一見リンクされているように見えて、クリックして初めてリンクされていないとわかることがあります。
こういった場合は、上のコーディングミスを調べるツールでもわからないことがあるので、Xenuというリンクチェックツールを使います。
「File」→「Check URL」を選択します。するとウィンドウが立ち上がるので、対象ページのアドレスを入れます。
リンク切れのアドレスは赤字で出てきます。このアドレスをページ内検索して、正しいアドレスに修正します。
修正指示があった場所以外に、不要なタグや文字が混入する場合があります。
このような場合は、差文比較ツールのWinMergeを使ってチェックします。
「ファイル」→「開く」を選択します。今回の修正ファイルと前回のファイル（今回の修正が反映される前のファイル）をそれぞれドラッグし、「OK」を押します。 （もしくは、「参照」からファイルを選択します。）
すると、両ファイルのソースで異なっている部分がハイライトされるので、その部分が正しいかチェックします。
不要なタグや文字が混入していた場合は、コーダーさんに伝えて削除してもらいます。
以上、ページアップ後ディレクターがチェックすべきポイントと便利ツール5つでした。
もちろんコーダーさんもチェックはしていると思いますが、さらに自分のダブルチェックでぬかりなく。
きちんと品質を保持していきたいですね。
食べ物は明るめの自然光（太陽光）と相性が良いです。
蛍光灯や電球などの白熱光は黄味がかって、古く見えてしまう場合があります。
これを自然光に近づけるには、色相やカラーバランスを調整し、青色を混ぜます。
↓は、「カラーバランス」で青を強めにし、明るさを上げたものです。
明暗の差は照りやつや、光沢を強調します。これがはっきりしているほど、おいしそうに見えます。
光沢のつけ方はこちら↓
写真画像をコピーし、上に重ねます。
レイヤーの不透明度を調節して、不要な光沢の部分を消しゴムツールで消します。
人の食欲を増進をさせる色は、暖色系と言われています。
その中でも特に強いのが、赤とオレンジです。
反対に、食欲を減退させる色は、寒色系と言われています。
特に青は、自然界に青い食べ物が無いとされているため、本能的に拒否する色とのことです。
（青いスライム肉まんが流行りましたが、これは物珍しいからこそと思います。）
ただ例外なのが、清涼感を売りにした食品です。 飲料水には、青が多く使われていますね。これは商品のみずみずしさ、爽快感を表しているためと考えられます。 （それに商品自体が青いわけではない...）
温かい食べ物には温かい表現を、冷たい食べ物には冷たい表現を加えると効果的です。
温かい表現とは、湯気を加えるなど。
湯気のつけ方は、こちらを参考にさせていただきました。
冷たい表現とは、水滴を加えるなど。
水滴のつけ方は、こちらを参考にさせていただきました。
以上、食べ物をおいしく見せるためのレタッチ方法でした。
もちろんやりすぎは良くありませんが、コツをおさえて、食べてみたい、飲んでみたいとユーザーに思わせるようにしたいですね。
私の会社では、デザイナーの能力を大まかに3段階に分けています。
それぞれの段階によって、指示方法を変えています。
ディレクターの指示の仕方によって、デザインの仕上がりは左右されることがありますね。
きちんとデザイナーの能力を把握し、そのデザイナーに合った指示方法を心がけていきたいものです。
回転寿司店のサイトです。
寿司ネタの色が黒バックに鮮やかに映えますね。また、薬味の色がネタを引き立てています。
大阪にあるダイニングゾーンのサイトです。
大きな写真が迫力ありますね。食品の照りやカラフルな食材が食欲をそそります。
スープ専門店のサイトです。
スープの写真は彩度低めですがしっかりとおいしそうに見えます。サイト全体の洗練された素朴感も良いですね。
原宿にあるレストランのサイトです。
鮮やかなライムグリーンとナチュラルフードがマッチしています。シンプルですが印象に残ります。
ハインツのレトルトパスタソースのサイトです。
こちらも写真を大きく使ったサイトで迫力があります。また、食事のシチュエーションを想像させて良いですね。
野菜と郷土料理の通販サイトです。旬の食材が主役で、サイト全体のシンプルで親しみやすい雰囲気と合っています。
ナチュラルフードに関するサイト（？）。こちらも食材を引き立てるデザインです。手描きのアイコンがナチュラル感やあたたかみをアップしています。
フードフォトグラファーのサイトです。整然と並んだ写真はどれもおいしそうで、レタッチをする際の参考にもなりますね。
しゃぶしゃぶのお店のサイトです。おいしそうな肉の写真と、店内の素敵な写真を見ると、行きたくなりますね。
ドレッシングのサイトです。野菜にドレッシングがかかっているだけなのですが、とても食べたくなります。
神戸の洋菓子店のサイトです。落ち着いた背景に、ケーキが鮮やかに引き立ちます。
大阪の和菓子店のサイトです。商品に合った見せ方をしているとても優れたデザインだと思います。
北九州市の和菓子のサイトです。抹茶生大福の写真が素晴らしいですね。
]]>仕事内容は、制作会社によって微妙に異なります。が、概ね以下のことは共通しているかなと思います。
（会社によっては、プロデューサーや営業の人が担当していることもありますね。）
特に必要な能力は、問題発見・解決能力と、コミュニケーション力だと思います。制作に関する知識は広く浅くで良いと思います。
また、下記の能力が全て最初から必要なわけではなく、ディレクターになってから身につけても大丈夫です。
私が一番大変だと思うのは、デザインが混迷することです。
デザイナーは疲弊してしまうし、工数もかかってしまうし、プロジェクトに携わる人たちは不安に駆られるし...。
混迷する時は、クライアントは消去法で落としどころを探っている場合が多いので、複数案を出すことで解決できることがあります。
どうしても決まらない時は、クライアントにラフを描いてもらったり、サンプル画像を出してもらう場合もあります。しかし、これは消去法である程度方向が定まってきたからやれることでもあります...。
これはいろいろとありました。
記事にまとめましたので、興味のある方はこちらを読んでみてくださいな。
デザイナー時代と比べて、私は減りました。
これは会社やどんなクライアントを担当するかによって大きく変わると思いますが...。
急な修正依頼が来なければ、大体定時～＋1時間の残業で帰っています。ただ、日中の仕事内容は凝縮されました。仕事後の疲労感は前と変わらないです。
話す練習をたくさんすれば大丈夫と思います。私は一人の時に良くぶつぶつと喋ってます。ひとり言がものすごく増えた...。
それと、最低限話さなければならないことは何かっていうのをあらかじめ紙にまとめておくのも良いと思います。
さらに用意しておくと安心なのは、これを説明したら、相手から質問されそうだなっていうもの。
このような事前準備をしておけば大丈夫です。
代理店も怖いよ。
（嘘です相手がクライアントでも代理店でも相手を思った言動を心がければ打ち解けられて恐怖心も薄まります＞＜）
以上、私の体験から書いてみました。 Webディレクターって何？というのが少しでもわかれば幸いです。
]]>あくまで自分比なのですが...
ディレクターになると、デザイナーさんがつくったデザインをチェックする機会が増えます。すると、良いデザインを見分ける目が肥えます。
良いデザインからは、こうしたらいいんだな、という多くの解法が得られます。この色遣い良いな、とか、こうしたらメリハリがつくのか、とか。
あまり良くないデザインについては、改善点を考えることが多くなります。こうしたらもっと見栄えが良くなるのに、とか、フォントはこっちの方が良いだろうな、とか。
このように、他の人がつくったデザインをじっくり観察することで、自分のデザインの引き出し強化やデザイン力向上に結びつきました。
これは、ディレクターになって一番良かったことでした。
ディレクターの役割の一つに、円滑にプロジェクトを進めるというのがあります。
円滑にプロジェクトを進めるためには、潜在的な不安や懸念事項を解消することが重要だと思います。それは自分だけでなく、クライアント、デザイナーやコーダーなどそのプロジェクトに関わる人たち全てのです。
その人たちの不安や懸念事項を予想し、対策をする。こうすることで先回りをする力がつき、順調にプロジェクトを進めることができます。
例えば、クライアントに企画書を説明するときに、それだけを持っていくのではなくて、クライアントが疑問に持つだろうなということをリスト化して用意する、など。
他のメリットとしては、時間や精神的に余裕が持てたり、残業をなくしたり、事故を未然に防いだり。あとはクライアントに信頼されるようになったり。それが次の仕事につながったりもします。
クライアントに資料を説明する時や、電話で話すときなど、めちゃめちゃ緊張します...けれど、こうした場数を踏むことで、度胸がついたと思います。
たくさん失敗をした、ってことも一因かもしれません。
これは会社にもよると思うのですが、私の場合は、自分のペースや、やり方でプロジェクトを進めることができて、とても楽です。
作業工程の時間配分や、デザイナーやコーダーへの指示の出し方などを自分で工夫して、自由に段取りをすることができます。
これは、指示を受ける側で、いつも追われていたデザイナー時代と比べて、とてもやりやすくなりました。
クライアントや外注先など、人との出会いが増えました。
すごいなぁと思う人がたくさんいます。説明がわかりやすい人や、仕事が早くて正確な人、あらゆることを想定して対策を講じることができる人...などなど。以上、ディレクターになって良かったことでした。もちろんメリットだけじゃなくて、デメリットもあります。クライアントとの折衝や交渉など、胃が痛むこともあります。
ただ、こういったことは次第に慣れていって、対処法の経験値も上がっていくと思います。それに伴って、人間的に成長できる面も多々ありますし。
個人的には、ディレクターの仕事が思っていたより面白く、学ぶこともたくさんありますし、なって良かったなぁと思います。時々無性にがっつりとしたデザインをしたくなったり、コーディングをしたくなったりしますが...ｗ
]]>
ポストカードは3種類です。アクセサリーはネックレスやピアスなど、全部で30点くらいになる予定です。
ポストカードの方は、紅葉の森をピクニックと、草原でお弁当（メッセージエリア付き）、花を持っているものの3種類で、各10枚ずつ用意しています。
（売れなかったら怖いので少なめに...笑）
アクセサリーの方は、ほぼ一点物です。
（多少似たデザインはあっても...）
カジュアルなデザインなので、オフ用にどうぞー。
場所は、J-22になります。詳しい場所はこちら
4階のシアタースペースに近いエリアです。
来ていただければ嬉しいです！よろしくお願いしますー！
]]>
グラデーションの部分で色をつくるのではなく、白黒でグラデーションの幅を決めて、描画モードを「オーバーレイ」に。その後、レイヤーの部分で色を変更すると楽です。
スマートオブジェクトにすると、あとからやり直しがきくので安心です。
例えば写真を決まったサイズに縮小し、軽く色調補正をして保存、という動作があったとき、アクションに登録しておくと便利です。
あとで色調補正を微調整するにしても、最初から作業するより負担が減るはず。
あとで何度も調整をやり直せるので便利です。
時々、これを知らない方がいるのですが、このように設定すると、カンバス上のオブジェクトを触ることができ、直感的に作業できます。
これも時々知らない方がいるので、念のため。
マスクをかけたいときや塗りつぶしたいときに使えます。
レイヤーの数が多くなったときはこれで移動させると便利です。
同様に、一番下へ持っていきたいときは、「最背面へ」を選びます。
「Ctrl＋T」でオブジェクトのサイズを変えたいとき、数値の中を右クリックすると単位が変えられ、サイズの変更がしやすくなります。
]]>デザインの意味が正確に伝わると、ユーザーに与えたい印象とユーザーが受け取る印象は一致します。これが、意味の伝わっている状態です。
例えば、うさぎの写真という素材があったとします。
うさぎのイメージとして、どのようなものがあるでしょう。
考えられるイメージとして、「かわいい」、「さびしがりや」、「少女性」、「純粋」などがあると思います。
デザイナーは、うさぎを用いることで「かわいい」や「少女性」を表現したつもりでも、ユーザーは、「さびしがりや」として受け取るかもしれません。
このとき、ユーザーに与えたい印象と、ユーザーが受け取る印象は違いますね。
しかし、うさぎの素材に、ピンクのストライプやレースを組み合わせたとします。
すると、「かわいい」や「少女性」の表現に近づいたのではないでしょうか。
以上をふまえて、意味を正確に伝えるための手順を具体的に説明していきます。
例えば、ユーザーに「かわいい」という印象を与えたいとき、どのような要素（素材）があるでしょうか。
といったものが考えられるのではないでしょうか。
しかし、「かわいい」には色々と種類がありますね。子供のようなかわいいや、女性らしいかわいい、ナチュラルなかわいいなど。
ここで、表現したいイメージが、「高級感のあるかわいい」であったとします。
「高級感」を表現する要素（素材）として、どのようなものが考えられるでしょうか。
などが考えられると思います。
かわいいに比べて少ないですね...。
主に、色や余白で表現するような感じでしょうか。
「かわいい」と「高級感」の各素材から、共通要素を抜き出したり、混ぜ合わせたりします。
これらから、つくってみた画像がこちらです。
「かわいい」かつ「高級感」っぽく見えるのではないでしょうか。
このように、要素を組み合わせることで（混ぜ合わせることで）、デザインの意味が伝わりやすくなります。
そのイメージを表現する要素（素材）を知るには、自分が良いと思ったポスターやパンフレットなどを観察するのがおすすめです。
どのような色やフォントが使われているのかを細かく見て、それをどのような印象か、を考えるとデザインがしやすくなると思います。
(webデザインでも良いのですが、デザインの意味が伝わりやすいもの、デザインとして洗練されたものはポスターやパンフレットなど紙のデザインに多いと感じます。)
デザイナーとして、きちんと意味の伝わるものを作るということを心がけていきたいですね。
説明について、わかりにくい箇所などありましたら、下のコメントフォームからお知らせいただけると幸いです。
]]>HTML5では文脈に沿ったマークアップが必要なため、要素を正しく理解することが必要。
HTML5では旧要素も再定義されている。
要素の数は全部で108個で、そのうち、HTML5で新たに追加されたのは24個。
がんばって覚えようー！
ブラウザによって使えるセレクタが限られていること。
その差異をどうするか？は考えておく必要がある。
考え方としては、
などがある。それぞれの考え方については、ブラウザによってHTML5やCSS3などの対応が違う中で、私たちはどうやって使用していくかへ
2Dのベクター画像をXMLで記述した言語のこと。
SVG Demo
http://bit.ly/svgdemo
IEでもRaphaelというJavaScriptのライブラリを使うことでSVGを使用できる。
考え方3つ
まずは最低ラインの対応をし、その上で新しい機能をのせる。
例）四角の角を基準にして、モダンブラウザでは角丸にする。
基本は新しい環境にあわせ、壊れない程度にグレードダウン。
例）角丸やグラデーションなどの使用を基準にし、対応していないブラウザでは四角の角でベタ塗りにする。
標準を基準にし、対応していないものは補う。
例）CSSハックや画像などを使用し、他ブラウザでも同じ表示にする。
HTML5などの対応状況を調べるJavaScriptライブラリ。
調べるだけで、対応はしないが、htmlタグにclassがつくのでそれを利用できる。
標準機能を真似するJavaScriptライブラリ。
IE6やIE7の独自実装などを利用して、表示をモダンブラウザに近づける。
商品紹介やギャラリーなど、情報の順位差が少ないサイト。
海外のフォトグラファーのサイト。写真が正方形にはめ込まれていて、整然と並んだ感じがきれいですね。
大小の変化でメリハリをつけ、また情報に順位差をつけています。
情報が縦で分けられ、色分けされているのでどの情報と紐づいているのかがわかりやすいです。
カード型のグリッドデザインは真新しさがなくなってきており、スタンダードになりつつあるかもしれません。
しかし、本当にこのレイアウトが最適なのか、一考してみる必要があると思います。
基本的には、こちらの公式からソースをダウンロードして貼りつければOK
http://twitter.com/about/resources/tweetbutton
<script>タグ内に、「charset="utf-8"」を追加してみる。
<a href="http://twitter.com/share?url=URLを入れます&text=文言を入れます"><img src="dummy.gif" alt="" /></a>
などとする。
URLや文言は、utf-8にエンコードしてから入れる。
エンコードにはこちらのソフトが便利。
http://www.forest.impress.co.jp/article/2008/02/14/okiniiri.html
「data-lang="ja"」を「data-lang="en"」にする
基本的には、こちらの公式からソースをダウンロードして貼りつければOK
http://developers.facebook.com/docs/reference/plugins/like/
IE6、IE7だとFirefoxに比べて横幅が広がるので、100pxより小さいと切れてしまう。
（文字サイズが11pxで、日本語環境だとIE6、IE7は「いいね！」が12pxになってしまう）
いいね数がカウントされてない時は、ボタン右にアキがでる。
その為、ボタンが右揃えだとデザインカンプ通りにならないことがあるので注意。
ボタンを押すと一瞬数値は変わるけど、また元に戻る...
恐らく動作は大丈夫なのだけど、本番反映まできちんと動くかわからず不安...
すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。
一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。
パスの図形でも、フリーハンドの図形でも大丈夫です
調整レイヤーも同じようにマスクがけできます。
選択範囲から作成するマスクです。
選択範囲をとる方法は様々ありますので、その分使い勝手の良いマスクです。ただ、一度選択範囲をかけてマスクを作成すると、あとでマスクのサイズや形を変えるのが少々面倒です。
（この時、レイヤーにロックがかかっていると、マスクボタンを押せません）
マスクの形を変えるには、ペイントツールを使います。
マスクのリンクを外し、マスクのサムネイル部分をクリックして選択します。
黒で塗るとマスク領域を削除し、白で塗るとマスクを作成します。
レイヤーだけでなくフォルダにもマスクをかけられます。
グラデーションもかけられます。
（マスクのサムネイル部分をクリックし、『Ctrl＋クリック』でマスク部分を選択します。
この時、グラデーションは黒→白にします）
パスから作成するマスクです。
パスによってマスクの形を自由に変えられるので、あとから修正する時は楽です。
（パスの設定は、『シェイプレイヤー』にしてください）
パスをいじることで、マスクの形を変えられます。
マスクの重ねがけ（？）もできます。
それぞれの用途や特徴に応じて、マスクのかけ方を選んでみてはいかがでしょうか。
]]>例えば光の当たり方で顔だけが暗い時など、もう少し明るくしたい、ってことがありますね。
01) レイヤーを新規作成し、モードをオーバーレイにする。
02) ブラシを選択し、描画色を白にする。
03) 明るくしたい部分を塗る。この写真では顔をもう少し明るくしたかったので、このように塗りました。はみ出てる部分は消しゴムツールで消去。
04) 不透明度を調節して、出来上がりです。
逆に暗くする方法です。上の方法で、描画色を黒にすればOKです。
01) 暗くしたい部分を塗る。この写真でも、顔のあたりを塗ります。
02) 不透明度で明るさを調節する。
写真は足成さん (http://www.ashinari.com/) よりお借りしました。ありがとうございます。
]]>