※画面キャプチャも長くてスミマセン。鬱陶しさは全く感じない。ビジュアルレイアウト的な奇抜さと大胆さは一見してわかる。ブランド力の高いサイトは、このくらいやっちゃっていいと思う。横並びのECサイト、浅い階層からできるだけ多くの商品にたどり着いてもらう、というキモチは分かるが、チラシの域を脱しない。店そのもののポリシーが利用者の購入意思判断を左右することだろう。そこにこだわりや、良い商品を仕入れてくる「眼」を利用者が感じることがなければ自ずとそのような「眼」を持つ他のショップに移動し、戻ってきてはもらえないだろう。メニューも特徴的である。通常であればそのすぐ横にMensを置きたくなるもの。ここではWomens→Shoes→Handbags→Beauty→CO-OP→ようやくMensという距離感。思い切りの良さは、視覚的インパクトだけでなく、機能面でも実行している。VODKAの広告シリーズ、秀逸です。Yorkにいた時に知り合いになった方とその会社さんは、模型で作成されていました。すごく精巧にできていて、正直めちゃくちゃ感動したのを覚えています。ググってみると、たくさんヒットしますので、興味のある方はご覧下さい。インスピレーションにいいですよ〜。参考までに検索結果ページのリンクつけておきます。comment車など無機質なものを切り抜くにはパスが適していると思いますが、人物など有機物を切り抜く際は、マグネット選択ツールをよく使うので、ご紹介します。【作業手順】1)「コマンド+J」もしくは「レイヤー下「新規レイヤーを作成」にドラッグ」で、レイヤーを複製します。2)複製したレイヤーに、レベル補正(「コマンド+L」もしくは上部メニュー「イメージ/色調補正/レベル補正」を選択)をかけ、非常にコントラストを高くします。マグネットツールでは色の境目部分に、マグネットが吸い付くように選択範囲をとっていくので、コントラストをはっきりとさせています。3)「マグネット選択ツール」を選択し、切り抜く境界辺りを一度クリックします。そのあとはクリック無しで、境界を大まかになぞっていきます。境界にそって、マグネットが吸い付くように、自動でポイントが追加されていきます。4)人物を切り抜いた場合は必要ないのですが、今回はコントラストをあげた際に、犬の毛のふわふわした部分が大きめに選択範囲に含まれたので、少し調整します。選択が完了したら、上部メニュー「選択範囲/選択範囲変更/縮小」をクリックし、数値を1〜2px入力し、選択範囲を縮めます。再度、上部メニュー「選択範囲/選択範囲変更/境界をぼかす」で、0.5pxを入力します。5)背景レイヤーをダブルクリックして「レイヤー0」に変更し、加工出来るレイヤーにします。引き続きレイヤーの下「ベクトルマスクを追加」をクリックします。「レイヤー0」にレイヤーマスクが追加されました。資料用など、おおざっぱな切り抜きで良い場合は、ここまでで完成です。■■■ここから微調整にはいります■■■6)shiftを押しながら、今できた「レイヤーマスクサムネール」をクリックします。すると、今作ったマスクの部分に赤いバツマークが表示され、マスクが非表示になります。7)チャンネルタブに移動し、一番下の「レイヤー0マスク」の目玉を表示させます。レイヤーマスクの黒い部分(隠れる部分)が、半透明の赤色に塗りつぶされます。8)ブラシツールや指先ツールで境界部分をキレイに調整していきます。表示したい部分は塗り「白」で、マスクしたい部分は塗り「黒」で塗りつぶしていきます。この写真の様なフワフワした毛の写真には、指先ツールは最適です。白(表示)と黒(マスクする)「マウス右クリック」もしくは「control+クリック」:ブラシや指先ツールのサイズ変更9)「レイヤー0マスク」の目玉をクリックしてマスクを非表示にし、レイヤータブを押して戻ります。「レイヤーマスクサムネール」をクリックすると、赤のバツマークが取れてマスクが反映されます。必要であれば、6)〜9)を何度か繰り返し、マスクの掛かり具合を調整します。コントラストを強くしたレイヤーを削除して、できあがりです。好きな背景に配置しましょう。チャンネルを使用するこの方法は、「切り抜きたい対象」と「マスクの境界」が同時に表示できるので、作業効率がアップしますので、おすすめです。comment新潟県にある長岡造形大学。このサイトの奥の方に2007年のギャラリーページがありますが、見せ方がなかなか面白いです。中心にくるくる動く円が見えたら中央をクリック。画面右側が「作品」が現れます。同調して反対側にいる「ひと=作った人かな?」が対になって表示されます。真ん中の×(ばってん)をクリックすると詳細がみえる仕組みになっています。最近はこういったユニークな見せ方が揶揄されてコーポレートサイトやECサイトではほとんど見ることがなくなりましたね。エンタメ系でかろうじて残っているのかな?操作性が良ければ、あるいは童心に帰ったように操作性そのものを楽しんでもらうようなUIは、ビジネスと直結しなくても存在に意義を見いだすことも十分可能なのではないかと思います。comment勝手にデザインというシリーズに挑戦です。やめてくれ、と言われるかも知れませんので、いつまで続くか予想不可能です。(笑)文字通り勝手にデザインし直しただけですので、本家のサイトや企業様とは何の関係もありません。うちが手を加えるとしたら、こんな感じにするかな、という程度の類ですのであまり深く考えないでくださいね。初回はいつもおいしいミラノサンドシリーズとコーヒーをいただいているドトールコーヒーさんのサイト。キレイに作ってありますね。★現時点(2011年9月12日)のサイトトップページのイメージです。※画像クリックで拡大します。★次にうちが勝手にデザインし直すとしたら、こんな感じになります。※画像クリックで拡大します。■迷いのない情報提供という点をカタチにするとしましょう。※写真などの材料はほぼすべてドトールコーヒーさんのサイトのものです。★続いて要点説明です。※画像クリックで拡大します。★上記のエリアを番号に沿って説明しています。サイトの便利機能的なメニューを集約メインメニューはを4つにまとめ、アクセスのしやすさを向上。メニューページでは、フードとドリンクを一覧で表示します。ポイントカードページではカードそのものの説明とし、現在のポイント確認はMyドトールページにて確認。オフィスデリバリーは、従来のオフィス向けサービスの説明とオンラインオーダー機能を追加。将来的にビジネス用マイページも作成。メインビジュアル部分は、最も旬なフード、ドリンクの中でもイチオシの商品を左側に。右側にコーヒーに関連するホットなテーマであるカルチャーマガジンの最新号を掲載します。コーヒーに関連したライフスタイルや文化を飲食と併せて紹介し、ドトールコーヒーさんの人に対する「キモチ」を表現します。中段のコンテンツ導線部分は、これまでテキストベースで紹介していた新商品や限定セットなど飲食に特化した情報提供を行うエリアとして使用します。商品が3点以上ある場合は1つずつ横にスクロールします。Facebookページでドトールコーヒーファンとの交流を行い、ファンの声、改善要望など、これまで見えてこなかったお客さまからのメッセージを実直に拾い上げ、応えていく姿勢づくりを開始します。チェックイン機能によるクーポン配布も検討。他のコーヒーショップとの違い、コーヒーに対する情熱・こだわり、またドトールコーヒーというショップを構えることの意味など、諸々のこだわりを大きく訴求するカテゴリーとなります。Tポイントカードが使えるショップを明示し、外部サイトへのバナー広告ではなく、ドトール、エクセルシオールで利用できることを伝えます。飲食メニュー、店舗情報を閲覧するユーザーとは異なるセグメントが利用すると考えるページへの導線は、こちらにまとめて表示しています。その他、不要と考えたものは削除したり、他のページでまかなっているものとしています。粗いんですけど、こんな感じです。ヒアリングをしたわけでもなんでもないので、あくまで「ご参考までに」という感じで捉えていただければ。※写真素材、ロゴ、コピーなどの要素に関する著作権はドトールコーヒーさんに帰属します。※Tポイントロゴの著作権はCCC様に帰属します。※ドトールさんがご希望の場合はデザインデータを差し上げますので、ご遠慮なくお申し付けください。CommentPhotoshopで登録されているパターンの、登録した際の元画像を取得する方法をご紹介します。【手順】1)登録されているパターン一覧を表示させます。上部メニューから「編集/プリセットマネージャー」をクリックし、プリセットの種類から「パターン」を選択する2)登録されているパターンの一つにマウスを当てると、パターンの登録名とサイズが表示されます。このサイズでパターンは登録されています。RGBモード)の元画像を取得します。RGBモード)の新規ファイルを作成します。(画面は「表示方法その1」の手順で一覧を表示した図)3)新規ファイルの「背景」レイヤーをダブルクリックして「レイヤー0」に変更し、レイヤー効果が掛かるレイヤーにします。4)「レイヤー0」に「レイヤー効果/パターンオーバーレイ」を掛けていきます。「レイヤー0」を「ダブルクリック」もしくは「右クリック/レイヤー効果」から、レイヤースタイルウィンドウを表示します。5)「パターンオーバーレイ」から、抽出したいパターン効果(格子縞)を選択します。できあがった画像が、格子縞を登録した際の元画像になります。自分でパターンを作る際の参考に、またはWeb等でタイリングさせる際の元画像を作る時に、役立つのではないでしょうか。ちなみにillustratorでは、「スウォッチ」パレットからパターンを画面にドラッグすれば簡単に取得、加工できて便利ですよ。(関連記事:【illustrator】汎用的パターンの作り方と簡単登録)123。