Webデザイン制作・グラフィックデザイン制作・コンテンツ企画・販促キャンペーン企画など承ります。株式会社レベルQ
デザインとWebトレンドのデザイナーズマガジン【Key Person Q】 -Webデザイン Webデザイナー FLASH 広告-

グッドデザインなサイト、広告、プロダクト、コンテンツ、サービスを紹介するクリエイティビティ溢れるデザインウェブマガジン(ホントか?)。デザインイベントやウェブトレンドも紹介。

カテゴリー一覧

Webデザイン制作におけるノウハウ集

月刊WebDesigningにて連載執筆。100号記念冊子one's view 100に「おごるTV」掲載
月刊Web Designingのone's viewというコーナーで1ページまるまる連載担当させていただいております。one's viewは各デザイナー、クリエイターが1人1サイトを紹介していくコーナーで、6月号から半年ぐらい執筆しております。5月号にてペパボイエイリ社長に「おごるTV」をご紹介いただいたことがキッカケになり、お声をかけていただきました。
今月号はWebDesigning100号記念ということでこれまでのone's view(旧コーナー含む)のなかからチョイスされた記事をまとめた小冊子がついています。そこにもボクの執筆した記事と「おごるTV」を掲載させていただいております。

Webデザイン制作におけるノウハウ集

apple.jpg

iPodの広告風などというのにとどまらず、さまざまなアップルの要素からインスパイアされたチュートリアルが35種類もある。

アップルのオンラインショップの広告を模したものやおなじみのリンゴのロゴ、iPodShuffleやMacbookの本体画像を作ったりできる。

チュートリアルに沿って作っているときのわくわく感は、プラモデルでも組み立てているときの心持ちだったりする。

難易度はまちまちだが、光を効果的に使ったものも多く、応用が利きそう。

Webデザイン制作におけるノウハウ集

1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に
2.すべてはミリセカンド単位で数えろ
3.シンプルにすると強力になる
4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ
5.革新に挑め
6.世界に通用するデザインを
7.今日と明日のビジネスのために計画せよ
8.気を散らさず、目を楽しませるようにしなさい
9.人々の信頼にふさわしいようにしなさい
10.人間味を加えなさい
だそうです。10がいいですね。

Webデザイン制作におけるノウハウ集

アップルのデザイナーはどの製品についてもまったく異なるモックアップを10は作る。Lopp 曰く、「3つがよく見えるようにあと7つ」作るのではない。そんなことならみんながやっているだろう。そうではなくて、まったく制限を設けず心行くまでデザインさせたものを10作るのだ。それから何か月もかけて3つに絞り込む。そして最後に3つの中からこれはと思うものを決めるのだ。
アイデアを極限までに広げるデザイン会議とその対極の生産会議を平行してするんだね。

Webデザイン制作におけるノウハウ集

brandnew.gif
ロゴデザイン(CI/VI)のBefore→Afterが一覧になってるサイト。CI/VIが好きなので、眺めているだけでも楽しい。

Webデザイン制作におけるノウハウ集

bookofscan.jpg
日本マニュアルコンテストという賞で最高賞を受賞した富士ゼロックスの「スキャンの本」。スキャナーの取扱説明書を誰にでも理解できるような敷居の低い説明書になっているようだ。説明書はほぼ読まないほうだ。理由は内容が難しいし、ページ数も多いので読むのがメンドー。そんな消費者も多いだろう。この「スキャンの本」で富士ゼロックスはスキャナーの取扱について電話のお問い合わせが大幅に減少した模様。素晴らしいマニュアルといえば、IKEAの取扱説明書ですね。イラストだけで伝える。

Webデザイン制作におけるノウハウ集

Appleが熱狂的信者を作るために使った12のブランド戦略
その1:Appleのためだけの店を作った
その2:完全な解決策の提供
その3:Mac使いはカッコイイというイメージ
その4:様々な価格帯の製品展開
その5:乗り換えを困難にする
その6:各種メディアの絶好のネタになる
その7:教育機関への販売
その8:わかりやすい製品を提供する
その9:不愉快な部分は外部に丸投げ
その10:一貫性
その11:革新的な使い方の提案
その12:魅力的であること
とのことのようです。詳しくは以下のリンクで。

Webデザイン制作におけるノウハウ集

有限会社ユニバーサルワークスでは、2003年・2004年・2005年・2006年に引き続き、全国47都道府県、17政令指定都市すべての Webサイトを、また、今年から新たに特別区(東京23区)すべてのWebサイトを対象としたWebアクセシビリティ調査を行いました。 この調査は、Webサイトのアクセシビリティ(アクセスしやすさ)を当社独自のチェックリストに照らし合わせて数値化し、「音声化対応」「操作性」「可読性」などからなるレーダーチャートを自治体ごとに作成したものです。調査結果と現存するサイトを比較されながら、アクセスしやすいサイトとはどのようなものであるか考えるきっかけとなれば幸いです。
千葉県がやたら数値が低い…。操作性ゼロって…。

Webデザイン制作におけるノウハウ集

ユーザビリティとは、ユーザーの「今現在」の理解・慣れだけでなく、将来に渡って学んでいくユーザーの理解・慣れ、まで視やに入れたものでなければならない。 ヒューリスティック heuristic なアプローチ、というものを、Webデザイン、工業デザインなどの、ユーザーインターフェース制作者は理解しておかないと。 現時点でユーザーがわからないデザイン、というものと、デザイナーのひとりよがりによるデザインというのは大きく違うものなのだ。
ふむ。

Webデザイン制作におけるノウハウ集

accesshikaku.png
キーワード毎の各サイトのアクセスログ比較ができるサイト。

Webデザイン制作におけるノウハウ集

首都圏近郊にお住まいの方なら一度は目にしたことがあるのではないか。新宿東口の工事中に工事の板にガムテープで組まれた案内表示の数々。独特のバランス感覚と、テープでつくられたとは思えない素晴らしい造形が気になっていた人も多いはず。そんな文字についてのドキュメンタリーを発見!この文字をデザインしたのは、なんと警備員の佐藤修悦さんという方だった!
気になってはいたんだけど、ガムテープで作られていたので警備員が作っていたとは…。スゴイですね。下記はそのドキュメンタリー映像です。 ▲その1

Webデザイン制作におけるノウハウ集

業務を滞らせる「教えて君」には、真っ先にこのサイトを教えてあげましょう。
ということでエクセルの効率的な操作の技、組み合わせて使う関数の技などを紹介しているサイトがある。デザイナーの諸君は「えー!?エクセルなんて使わねーよ」と思うかもしれないが、デザイナーである前にビジネスマンであるためにそのエクセルを使わなければならない場面は出てくるはず。そんなときに活躍させてほしい。ちなみのボクもオフィスソフト苦手…。でもパワポの芸術美と機能美を兼ね備えたテンプレートを作ったら売れると思うんだけどねぇ。プレゼンには芸術美はそれほど必要ないかもしれないけど情報デザインされたものは必要ですよね。うん、エクセルから話がそれた。

Webデザイン制作におけるノウハウ集

「Spaml」とは、サイトにアクセスするだけで自動的に使い捨て用のメールアドレスが生成され、クリップボードにコピーまでされるというなかなか面白いネットサービスです。あとはメールアドレスを必要に応じて貼り付けるだけ。しかもそのメールアドレスの部分は完全ランダムなのですが、好きな名前に変更することも可能。会員登録必要。

Webデザイン制作におけるノウハウ集

Webサイト制作を企業サイト、店舗サイトなど受託で請け負っていれば必ずでてくるのが「アクセスマップ」の作成。頻度の割には地図のデータというのはないもの。今はグーグルマップなどがあり、サンプルにして作画するわけだが、イラレデータがあると大助かり。一部でしかないけどepsデータもダウンロードできる。「全て無料で、そのまま、または加工して、あらゆる営利活動や非営利活動で使用できます。使用の際に、許諾申請、および、当サイト名などのクレジット表記の必要はありません。」とのこと。

Webデザイン制作におけるノウハウ集

マルチブラウザでレイアウトチェック『スクリーンショット.jp』
Webサイト制作に携わるものとしては表示・動作テストは欠かせません。しかし、すべてのプラットホーム、すべてのブラウザ、すべてのバージョンをテストすることは専門でなければ難しい。そんなかゆいところに手が届くサービスがこれ。

Webデザイン制作におけるノウハウ集

CIの仕事をする時はやたらとサンプルブックを見まくる。理由は類似しないようにするためと未熟なので優れたCIを参考にさせてもらうとこと。EPSデータとしてもダウンロードできるサイトもあるからいろいろ遊べます。

Webデザイン制作におけるノウハウ集

ミニサイズのアイコンを集めたサイトを集めてみた。Webサイトやブログ、FLASHなどの制作で必要になるアイコンデザインのサンプルにどうぞ。

Webデザイン制作におけるノウハウ集

タイトルロゴなどを作る時に重宝するフォント。タイポはロゴなどを作る時に作るがひらがなが一番難しい。どれもすでにバランスがいいので手を加えにくい。縦書きはバランス抜群だけど、横書きになると途端にバランスがとれなくなるひらがな。そういう風に設計されていないだからだけど。ひらがなを作った先人たちはスゴイですね。感心してしまう。

Webデザイン制作におけるノウハウ集

FLASHなどのリッチコンテンツが増えるなかでBGMやSEなどの演出も必要頻度が増している。(音でると迷惑だと思うユーザーも多いですが)より良い演出には欠かせない要素である。デザイナーはフォントやロゴはデザインできるので、書体なくても作ることができる。しかし、サウンドはデザイナーの延長線上では制作できないので音の素材集は重宝したい。サウンドクリエイターの作ってもらえるのが最適なんだけど予算がない場合は素材集で。

Webデザイン制作におけるノウハウ集

infamousx.jpg
削除されたYouTubeのムービーを視聴できるサービス。消えてしまったムービーを見られるのはスゴイですね。やり方は該当のムービーURLのID_HERE>のID_HEREの部分をコピペして「View Video」をクリックするだけ。

Webデザイン制作におけるノウハウ集

商用利用が可能でなおかつクオリティの高い写真や画像がダウンロード可能なサイトも増えてきた。でもやっぱりお金がかかっちゃうし、契約ではとても高くなる場合もあったり、予算がない案件では無料素材や既に購入にしたロイヤリティフリーを使うぐらい。でもそれも数には限界がある。そんな時に役に立ちそうなのがこのサイト。キーワード検索で商用利用可能な無料の写真素材を検索してくれる。商用利用する際にロゴを入れたり事前許諾を行ったりコピーライト表示を行ったりする必要が全くない画像のみらしいので簡単に利用できる。クオリティは保証できませんが…。それにしてもレンタルフォト事業ておいしそうで一度はトライしてみたい。

Webデザイン制作におけるノウハウ集

coloribus_admirror.jpg
遥か以前にも似たようなサイトについてのエントリーをしたことがあるが別サイトで500種類ものサンプルがあったのでチェックしとく。どういう風に展開してたり、インスパイアされてたり、オマージュしてたり、パクってたりw してるの見るの結構面白いよね。

Webデザイン制作におけるノウハウ集

「園舎全体が遊具」というコンセプトからリング状の行き止まりのない園舎を提案したそうです。

Webデザイン制作におけるノウハウ集

日本語も化けずにでてくれる便利なサイトです。ただ、横幅をサイズに合わせて縮小する機能はないみたいで、当サイトをPDF化すると右側が切れてしまいます。それとドメイン内のリンク先のページもひもづけてPDF化してもらえるともっと便利でした。

Webデザイン制作におけるノウハウ集

グラフィックデザイン集、広告年鑑、写真本、ファッション、インテリア本、建築本など面白そうなデザイン本を見つけたけど、高価な本を内容を見ずに買うのはちょっと嫌だな...こんな経験ありませんか?ナーズコンシェルジュでは、ご興味を持っていただいたデザイン本の内容を購入前にご確認いただくコンシェルジュサービスを行っています。ということで便利そうです。

Webデザイン制作におけるノウハウ集


なかなか面白いです。いくつかの気づきをいただきました。続き(後半)はこちらから見られます。

Webデザイン制作におけるノウハウ集

算出方法はPVや、Google PageRank等、登録サイトの外部から計測できる情報を、組み合わせて計算しています。価格の更新は1日1回。前日に取得したデータを元に、毎日算定しなおします。らしいです。設置一日は0(ゼロ)円のようです。さてウチの売買価値はいくらなんでしょうか。100円とかだったら泣いちゃうねw

Webデザイン制作におけるノウハウ集

AdSenseのクリック単価が安いクライアントのリストを共有して作成し、それをAdSenseの非表示フィルタに追加することで収益をアップさせるというGoogle AdSenseの収益を50%引き上げるブラックリスト「AdsBlackList.com」の日本語版が登場。グーグルアドセンスの単価を少しでもアップさせたい人には朗報ですね。使ってみたけど、デザイン関係のクリック単価の安い広告主の報告があまりないのか。競争率が高くなく単価の高い広告主がいないのか。またはまだ48時間経過しておらず反映されていないのか。効果はまだ実感できず。

Webデザイン制作におけるノウハウ集

世界的企業というようなステータス感が植えつけられるほどの商業広告エリアタイムズスクエア。そこの広告を集めたページ。参考になるとか別にして目の肥やしに。

Webデザイン制作におけるノウハウ集

ロリポグーグルアドセンス導入のためのバナーのキャッチコピーなんだけど、妙に惹かれたコピーでした。そんだけ。

Webデザイン制作におけるノウハウ集

gigazineの記事。デザインアナリストなる方の鋭いツッコミ付き。

Webデザイン制作におけるノウハウ集

helveticafilm.jpg
Helvetica が2007年で誕生50周年になるのを記念してドキュメンタリー映画になるみたいです。マジですか。これは見たい。

Webデザイン制作におけるノウハウ集

海外のMP3を検索してくれるサイト。便利だけど…。

Webデザイン制作におけるノウハウ集

グーグルの新しい機能。どんな特許があるか検索できる。アメリカ特許商標庁と連携して特許商標庁に届けられた約700万の特許が検索できるそうです。以前、CDケースに関する特許の仕事に関わったことがあったのだが、アイデアともいえない一部の機能ですら特許をとられていてきりきりまいした記憶があります。日本の特許庁のグーグルと連動してほしい。

Webデザイン制作におけるノウハウ集

日本の伝統色を日本色名とともにRGB指定で羅列されているサイト。これは便利かも。日本の色の名前てステキですね。

Webデザイン制作におけるノウハウ集

populartypeface.gif
アメリカの新聞紙で人気のある欧文書体トップ10。
1位:Poynter
2位:Franklin Gothic
3位:Helvetica
4位:Utopia
5位:Times
6位:Nimrod
7位:Century Old Style
8位:Interstate
9位:Bureau Grotesque
10位:Miller
日本の新聞紙でよく使われる書体てなんだっけ?最近はネットがあるので新聞まるで読んでない自分に気づく。日経新聞ぐらいは購読しときたいけど…。

Webデザイン制作におけるノウハウ集

オンライン写真共有サイト「Flickr」でデザインのインスピレーションを得るための閲覧方法があった。煮詰まったりタイトな納期のデザイン仕事の場合は参考資料があればあるほどありがたいもの。それをオンラインですませちゃうのもひとつの手。以下のカテゴリー別リンクを参照。

Webデザイン制作におけるノウハウ集

Web2.0サイトに共通なデザインがあるようです。「シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。」だそうです。そいえば多いですね。ナルホド。

Webデザイン制作におけるノウハウ集

映画のヒット作の有名シーンを無料提供することで購買につなげようとする試み(?)のサイト。とクリッククリックしていったら某アクション映画はラストシーンが公開されてたんだけどいいんですか?(笑)ブログやSNSでも共有できるもよう。

Webデザイン制作におけるノウハウ集

広告βさんトコでウムウムしたエントリーをピックアップ。ライフカードは面白いので見ちゃうのですが、一般的には「続きはWebで」といわれても見ないんですね。ま、めんどいわな。それよりもWebで、インタラクティブなフローを作り、ある程度のストックができてから、TVに投下するほうが効率が良いという考察。すてきです。こうなればウェブの仕事がより一層楽しくなります。

Webデザイン制作におけるノウハウ集

like.jpg
画像につけられたタグ情報を読み取る従来の画像検索ではなく画像の類似性のあるものを検出するサーチサイトがオープン。これはグレート。現在はファッション系に絞っている模様。有名人のアノ商品を検索して(色や形などの類似性を高めて再検出も可能)amazonなどのECサイトから購入も可能のようだ。グレート。10年ぐらい前から到達できそうでできなかった領域に入った感じですかね。動画検索も時間の問題ですかね。

Webデザイン制作におけるノウハウ集

正しいロゴを当てるテストゲーム。知っているようで同じようなものを並べれると当てられないものだね。しっかりと覚えていないものなんだと再認識。ウムウム。タイムは00:54:76。ランクが72.12%だった。特にYahooがわかんなかったんですけど(笑)

Webデザイン制作におけるノウハウ集

atelier.jpg
タイトルほど仰々しいものではないけど、別の使い方で楽しんでみるのも案外面白いアイデアに発展したりしますよね。上の写真はアイスクリームが溶けて落ちないように掃除機のパックを使ってせきとめているけど。おもえばそういうコーンのアイスってないのかな。

Webデザイン制作におけるノウハウ集

書体みるの好き。外を出歩けば広告や商品などばかり目が行ってしまう。ま、最近は散歩の犬ばっかりみてるけど。田舎でみたけた書体というのも面白いかも。山奥の古びた看板の書体など乱暴で大胆で面白かったりする。

Webデザイン制作におけるノウハウ集

最近移籍した事務所はWin環境なので使い慣れない。Mac環境に慣れてるせいもあってキー配列、ショートカット、アプリケーション管理、フォルダ管理、ウィンドウ管理などの勝手が違って制作スピードがトップギアに入らない。フォルダをカラーリング管理ソフト、ウィンドウをタイトルバーのみに縮めるソフト、キー配列ソフトなどのいくつかのツールを導入してみた。近づけさせられる選択肢があるというWindowsの使い勝手の良さはいいね。

デザイン&FLASH制作のお仕事を承ります!!
当サイトは、株式会社レベルQの協賛をいただいてます。斬新なプロモーションやブランディングなどのプランニング、ハイクオリティなデザインやリッチFLASHなどの制作などのお仕事を承ります。黄金体験コンテンツを創造するべく日々自社サービスを開発しております。
<レベルQ プロジェクト一覧>
女の子の嘘と本音マガジン【東京ナイロンガールズ】
ちょっと元気が出るごはんメディア【おごるTV】
人間レンタルサービス【自分屋24】
スイカはじめました【東京スイカ研究会】
このサイトについて
当サイト「キーパーソンQ」は、グッドデザイン、グッドな広告、グッドコンテンツ、ユニークなプロダクト、ユニークなコンテンツ、ユニークなサービス、またはデザイン制作におけるノウハウなどを紹介するクリエイティビティ溢れるデザインウェブマガジンです。(希望)またデザインイベントやウェブのトレンドコンテンツを紹介します。またグッドなデザインの情報がありましたらご連絡ください。
プロフィール
当サイトを管理・運営しているMr.Qです。元々はアートディレクターやデザイナーとして主にデザイン業をしておりました。最近では株式会社レベルQという黄金体験型クリエイティブファームの経営を始めました。Mr.QまたはレベルQに企画、アートディレクション、グラフィックデザイン制作、Webデザイン制作やFLASH制作のお仕事をご相談は下記のメールからお問い合わせください。