designaholic -Creative Column-

期待感あふれるクリエイティブなComingSoonページ25個

2012-05-09T00:00:00Z

WEBサイトの公開やサービスの開始などを告知するcoming soonページのまとめです。

Freelancing Map

Clarify

Gusteu

pleek.fm

PureAromaTea.com

ChoicePunc

Human Writ.es

Kwanini?

Bournemouth Food and Drink Festival

アクセスしてみたらまだ公開されていなかったというユーザーに期待感を与え、再来訪してもらうのはなかなかハードルが高いのでぜひ参考にしたいですね。

ただ、仕事柄かティザーページや準備中のコンテンツを見ると向こう側の大人の事情を垣間見たような気がしてしまうのですが。。

25 Creative Coming Soon Pages

あなたはどのタイプ？facebookでの行動パターン11

2012-05-08T00:00:00Z

facebookのユーザーが11のタイプに分かれるという記事が興味深かったのでご紹介します。

以下のような11のタイプがいるそうです。

Hyena（ハイエナ）

人の投稿を見て笑うだけで自分は何も発信しない人。

Lurker（潜む人）

自分からは投稿やコメントなど何もしないが、すべての記事を読んで友達のステータスをすべて把握している人。

Rooster（おしどり）

それが仕事かと思うくらい毎日facebookで挨拶をしている人。

Mr./Ms. Pupular（人気者）

申請、承認が割と見境なく友達がやたら多い人。

Gamer（ゲーマー）

ひたすらfacebookアプリのゲームばかりしている人。

Emo（ネガティブ）

自分の人生、仕事への愚痴や文句などネガティブなポストばかりする人。

Promoter（仕切り屋さん）

あまり親交のない友達でも積極的にイベントに招待したりする人。

Drama king /queen（ドラマチック）

「どうしたの？」の聞かれたいような投稿で注目を集めて、自分の事を話したがる人。

Thief（泥棒）

人の投稿を盗んで自分のことのように話す人。

The News （ニュース）

どんな時でも常に自分がどこで誰と何をしているか投稿し続けている人。

Liker（いいね）

自分からは投稿しないが、友達の投稿などにいつも「いいね」をする人。

言われてみると、「これはあの人だな…」と思い当たるものが多いのではないでしょうか。

ちなみにあるアンケートで友人のFacebook上の振るまいに違和感を持ったことがあると答えた人が34.4％いたそうです。

その内容としては「キャラを作っている」「いい人と思われたがっている」「理想の人を想像して演技している」など。とはいっても職場の人や仕事関連の人の目に触れることも考えたらプライベート全開で何でも言ってしまうのも問題ですが。。

以前mixiの副社長が「建前のfacebook、本音のmixi」と言っていましたが、そうするとTwitterは「公衆の面前」ってとこでしょうか。各SNSの特性を理解して適度な距離感をとって利用することが重要ですね。

個人的にはfacebookでは十数年会っていない同級生の近況が知れたり、久々に連絡を取って飲みに行ったり、仕事の相談をいただいたりとプラスになっている事も多いので、今後も利用していきたいかなと思っています。

11 TYPES OF FACEBOOKERS

海外マーケティングエージェントのWEBサイト21個

2012-05-01T00:00:00Z

海外のマーケティング会社のWEBサイトのまとめです。デザインクオリティの高さに加えてそれぞれ得意分野などがひと目で見てとることができますね。

Espresso

The Creative District

Want2Grow?

Interaktiva Digital Marketing

The Holla Agency

Definition6

Victor & Spoils

CAMS

Filament

Creative Online Media

Eye Web Solutions

Adrenalin Media

IMarketing.com

CHE

CreativeFeed

Mr B and Friends

Blue Ink Agency

Delete

Oyster

Odopod

Awesem

「紺屋の白袴」「医者の不養生」になりがちな広告屋のWEBサイトですが、自分たちが実践できてはじめて説得力がでるものですよね。自戒の意味もこめてですが。。

21 Marketing Agency Websites

ブログをネタ切れさせない為のたったひとつのルールとは

2012-04-25T00:00:00Z

「Twitterやfacebookを始めたらブログを書かなくなった。」なんて声を聞くことがありましたが、最近は自分のホームとしてブログの価値が再認識されていますね。

facebookやTwitterなどはフロー型のメディアと呼ばれるように、今あった出来事や気になったニュース記事などを瞬発的に発信し、情報を受け取る側もすれ違うように接触します。その情報の多くは鮮度が重要であり、時間とともに価値が下がっていきます。

逆にブログはストック型のメディアと呼ばれ、特にノウハウなどの記事は時間の経過とともに価値が下がるという事はありません。実際にPCのトラブルの際に参考にした記事が数年前の記事ということもあります。

しかし、いざブログを始めてみたけど続かずに放置してしまっている方も多いのではないでしょうか。ブログが続かなくなる理由としてよく聞くのが「ネタがない」ですね。

確かに普通に生活をしていれば、毎日が人に伝えたくなるような出来事ばかりという方はあまりいないでしょう。しかも街で出会ったおいしいランチやきれいな桜などはTwitterやfacebookで瞬時に発信して共有できてしまうのでなおさらブログのネタとなるような出来事は限られてきます。

「ネタがない」におちいる原因の多くは全方位的に何でもネタにしようとしている事だと思います。逆にテーマを限定したほうが多くのネタに気づく事が出来ます。

例えば「レシピを紹介するブログ」とテーマを定めれば毎日の食事やテレビや雑誌のレシピ記事がすべてネタの候補に、「花の写真を紹介するブログ」とすれば通りすがりに出会う花すべてがブログのネタになってきます。

そして、テーマを決める時はとにかく「自分の好きなこと、得意なこと。」にすべきだと思います。

いくら読者が多そうなテーマでも自分の興味のないゲームや趣味の情報を集めて記事を書いても面白くないですし、多くの人に有益な記事は書くことは難しいと思います。

テーマが見つからないという方は人に話してリアクションのよかったものを思い出してみるといいと思います。自分にとっては当たり前のこと、面白くないと思う事でも他人からしたらすごく有益な情報だということも多々あります。

ちなみにこのブログのテーマは「自分が参考になった事、興味あること」です。仕事がらWeb制作やデザイン、マーケティングなどの情報が中心になっていますが、このルールは常に守っています。

そうする事でRSSやニュース記事、仕事で出会った情報などから「これは記事になるかも」というものが自然と目にとまるようになってきます。

ちなみに私は登録しているRSSやTwitter、facebookで流れてくる情報から気になったものがあったらとりあえずRead it Later（Pocket）に放り込みます。そして記事としてまとめたいなと思ったものはEvernoteに移します。

情報の整理法は以下のエントリーでもまとめたのであわせてご覧ください。

情報の波にのまれずに整理する方法

行政機関・自治体のWEBサイトまとめ

2012-04-23T00:00:00Z

首相官邸のWEBサイトの構築費が4500万で高すぎるなんで話題なっていましたが、個人的には妥当なのかなと思っています。詳細な要件は分からないのでなんとも言えませんが場合によってはもっとかかってもおかしくない規模のプロジェクトではないでしょうか。

こういった機関のWEBサイトは老若男女が利用することはもちろん、視覚障害が利用する音声ブラウザなどにも対応させる必要があり非常に高いアクセシビリティが求められます。どういった対応が必要かは総務省の「みんなの公共サイト運用モデル」にまとめられています。

みんなの公共サイト運用モデル

総務省

厚生労働省

経済産業省

秋田県

茨城県

熊本県

こちらにもまとめてみたので合わせてどうぞ。

インストールされたフォントを一覧できる「wordmark.it」

2012-04-18T00:00:00Z

自分のPCにインストールされているフォントをブラウザ上で一覧できるWEBツール「wordmark.it」が便利だったので紹介します。

フリーソフトや同様のWEBツールもいくつかあるのですが、他のツールはフォントを選択すると反映されるといったものが多く、この「wordmark.it」はインストールされたフォントをまとめて確認できる点がおすすめです。

wordmark.it

操作はシンプルで中央のテキストボックスに確認したい文字列を入力するだけです。

positive/negativeで白黒を反転。
aa/Aa/AAで小文字・大文字・頭だけ大文字の切り替え。
smaller/biggerで文字サイズ変更。

となっています。

実際にプレビューした画面は以下のようになります。

他にも以下のようなツールもあります。

ロゴタイプ作成やトーン&マナーの策定などでフォントを選定する時には非常に便利ですね。

WEB屋の私がブックマークしている国内ブログまとめ

2012-04-16T00:00:00Z

この業界で仕事をはじめてかれこれ8年目。企画から設計、制作とひと通り経験させてもらい最近はもっぱら設計やディレクションに明け暮れる日々です。そんな私がブックマークやRSSで常に記事をチェックしているブログをご紹介します。

ホームページを作る人のネタ帳

誰もが知っている有名ブログですね。個人的にはコンテンツ作成に関する記事が非常に参考になっています。

WEBクリエイターボックス

こちらもWEB屋なら誰でも知っていますね。記事も勉強になりますが、人となりが伝わってくるManaさんのソーシャルなどへの適度な露出具合もすごくバランス感がいいなと感じてます。

かちびと.net

Wordpress、jQuery関連の記事が多く参考になります。上部からスライドするパネルなどサイトを見るのが楽しくなる細かなギミックもおすすめです。

男子ハック

MacやiPhoneのアプリ関連の記事が充実しています。内容とマッチしたサイトタイトルのつけ方や記事の作り方など運営の仕方が非常に上手いなぁと思うブログです。

IDEA*IDEA

GTD関連の著者としても有名な@taguchiさんの運営するブログ。さらっと読める海外の話題や動画ネタなどオススメです。

YATのBLOG

YATさんの運営するブログでWEBデザインやWEBツールなどに関する記事が中心です。

WEBデザインレシピ

女性らしいデザインなのも印象的ですが、ひとつひとつの記事が丁寧に解説されていて分かりやすく読みごたえもあるブログです。

バンクーバーのWEB屋

タイトルの通りバンクーバーで活動されているSennaさんの運営するブログ。海外の制作事情なども垣間見ることができて興味深いです。個人的に漫画もおすすめです。

could

講演などでも活躍されている長谷川恭久さんのブログ。シンプルなデザインに貫録すら感じますね。UIに関する記事は非常に勉強になる内容ばかりです。

U-Site

ユーザビリティに関する記事が中心。特にWEBユーザビリティの第一人者ヤコブ・ニールセン博士のAlertboxの日本語訳が掲載されえいるのが非常にありがたいです。

WEBディレクターズマニュアル

その名の通りWebディレクターの為になる記事が満載。私の業務にも近いので参考になるものや共感できる記事が多いです。

最近はあまり制作をする機会はないので上流工程に関する情報を中心にチェックしていますね。ちなみにRSSのチェックが続かないという方はこちらがお勧めです。

3日坊主にならないRSS管理ワザ

ホームボタンを使わずにiPhoneを使用する方法

2012-04-15T23:00:00Z

iPhoneを利用している方でホームボタンが効きづらくなったという経験をした方は多いのではないでしょうか。デコピンすると直るなど様々な対処法も聞きますが、ホームボタンにはもう愛想をつかせたという人にはホームボタンを一切使わずにiPhoneを使用する方法をおすすめします。

まずは[設定]→[一般]→[アクセシビリティ]と進むと以下にように「Assistive Touch」という項目があります。

この機能をONにすると右下に丸いボタンが現れます。

これをタッチすると以下のようなメニューが表示されます。

ここにある「ホーム」がホームボタンと同じ役割をします。また「デバイス」をタッチすると以下のような項目が表示され、これらもタッチするだけで操作できます。

他にもよく使う機能を登録したり、ジェスチャーをカスタマイズしたりすることが可能です。もともとは何らかの都合で画面を触る以外の操作が困難な方向けの機能ですが、ホームボタンが効かなくなってしまった際の応急処置としても利用できますね。

WEB探 vol.02『東京スカイツリー』

2012-04-05T00:00:00Z

5月22日の開業も近づいてきた東京スカイツリーの公式サイトです。一般的なWebサイトとしてはどうかと思うほどのページの長さですが、見事にスカイツリーの高さを表現しながら期待感を高めてくれています。

まずトップページの全容はこんな感じです。

とにかく長い。。しかしこの長さがスカイツリーがいかに高いかを表していますね。もちろん長いだけでなく各セクションでコンテンツが展開されます。

公式キャラクター「ソラカラちゃん」が浮遊しながらコンテンツをナビゲートしてくれるのですが、動きのスピード・コンテンツの展開するテンポが絶妙で思わず下までスクロールさせられてしまう魅せ方です。特に下まで見た後の「ページトップへ」の加速感はたまらないのでぜひ一度体感してみてください。

予約の倍率もすごかったようですが、開業に向けて注目度もどんどん上がっていく中、WEBサイトもどのように更新されていくのか要チェックですね。

東京スカイツリー公式サイト

WEBディレクターの為のコミュニケーション術

2012-04-04T00:00:00Z

WEBディレクターはWEBの知識はもちろんですが、高いコミュニケーション能力を求められる機会の多い役割ですね。コミュニケーション能力とはバランスをとってみんなとうまくやれるということもひとつですが、時にはハードな交渉をしたり、言いづらいことを伝えなくてはいけない場合もあります。

それだけ聞くと損な役回りに聞こえますが、その分プロジェクトに対する評価やクライアントからの感謝を一番に受けられるという面もあります。そんなWEBディレクターがコミュニケーションの際に重要だと思ったことをまとめてみました。

当たり前は自分だけのもの

人は自分の考えがスタンダードと考える傾向があり、さらに自分に都合のいいように受け取りがちです。「IE6なんて今どきターゲット外。」と思っていても社内の9割がIE6の企業にしたら「ブラウザと言えばIE6」かもしれません。

「そんなことは当たり前、言うまでもない。」と思ってもきちんと伝え、決め事であれば文書化して共有しましょう。

悪い情報ほど早くちゃんと伝える

「これを言ったら確実に怒られる。」そんな情報を伝えるのは気が重いですよね。しかし、放っておいて好転することは99％ありません。火種を大きくする前に早く伝えてしまった方が意外と上手く事が運ぶものです。

もうひとつ悪い情報を伝える際のポイントとしては結果を先に伝えましょう。例えば「御社のサーバーがハッキングされまして~」と時系列に話すと聞き手は最悪の事態もありうると考えイライラしてしまいます。

まず「個人情報の流出は防げたんですが。」といった具合に結果を伝えてから経緯を話せば相手も心構えができるので落ち着いて話を聞くことができます。

苦手な人ほど接触しよう

仕事では気に入った人とだけ付き合うというわけにはいきません。馬の合わない人やちょっと気難しそうな人なんかだと必要以上のコミュニケーションを避けて、極力メールで済ませたくなってしまいますよね。

しかし中途半端に距離をおいたことが後にトラブルを引き起こすケースがあります。実際にトラブルの大半がコミュニケーション不足に起因するものです。

人は接触回数が多いほど信頼や好感を持つという傾向がありますのでちょっと苦手だなと思ったら意識的にコミュニケーションの回数を増やしてみましょう。第1印象が悪くても、よく知ってみると趣味もあって意気投合するなんて事もありますよ。

電話を効果的に使う。

最近ではメールコミュニケーションが中心になり、重要な話やお詫びすらメールで済まされるようなケースも見受けられます。もちろん「相手の時間を束縛しない」「エビデンスとして残る」といったメリットもありますが、メールでは相手の感情や理解度が感じられませんし、そもそも届かない可能性もあります。

電話であれば相手の感情もわかりますし、理解度に応じて説明を加えることができますので意図しない伝わり方をしてしまう事は避けられますね。文書に残す必要があれば電話のあとに「先ほどの件の確認ですが～」とメールを送ってあげればいいですね。

相手に応じた言葉選びを。

たまに得意げに横文字や専門用語を並べて話しをしている人を見かけますが、相手に伝わっていないと全く意味がないですよね。意味がわからずに聞き流されていたことが実物を見てからクレームに発展なんてことも起こりえます。相手の理解度を見て言葉を選んだり、補足をしてあげてきちんと情報を伝えましょう。

WEBディレクターは立ち回り次第でプロジェクトを牽引する司令塔にもなれますし、ただの御用聞き・小間使いになってしまうこともあると思います。個人的にはそのための一番の武器がコミュニケーション力だと思うので常に磨いていきたいですね。

iPhoneから自分の痕跡を消す方法

2012-04-03T00:00:00Z

iPhoneはよく使う言葉を予測変換で出してくれたりと多彩な機能満載ですが、それが裏目にでて自分の首を絞めることにもなりかねません。そこでiPhoneから自分の痕跡を消す方法をご紹介します。

予測変換をリセットする

iPhoneの予測変換は1文字打つと今まで入力した単語が表示され、単語を入れると次に来る単語も予測して候補を表示してくれます。自分の名前や住所などよく使うものは候補を追うだけでも入力できてしまいます。

普通なら便利なこの機能も人手に渡ってしまうと諸刃の剣です。試しに友達のiPhoneであ、い、う・・・と入力してみると予測変換が彼の行動やよく登場する人の名前などを教えてくれました。。

この予測変換は簡単にリセットできます。[設定]→[一般]→[リセット]と進むと以下の画面が表示されます。ここで「キーボードの変換学習をリセット」とすれば今まで記憶されていた予測変換はリセットされ出荷時の状態に戻ります。

インターネットに閲覧を残さない

通常、Safariでインターネットを閲覧すると履歴が残ります。履歴を一斉削除することもできますが、履歴がいつも0件なのも不自然ですよね。最近のPCのブラウザにはプライベートブラウジング機能がありますが、もちろんiPhoneにもあります。

[設定]→[Safari]と進み、以下の画面で[プライベートブラウズ]を「オン」にします。

設定を変えてSafariを見てみると…

枠が黒くなっています。これがプライベートブラウジング中という事を表しており、この状態で閲覧した情報は履歴として保持されなくなります。ちょっとカッコいいので個人的にはこの状態にしておきたい気もしますが。。

こういった履歴もそうですが、ブラウザがパスワードを覚えてくれたりとハッキングなどされなくても情報漏洩してしまうリスクがいろいろなところに潜んでいるので管理には注意が必要ですね。

Google...etc　2012年エイプリルフールネタのまとめ。

2012-04-02T00:00:00Z

毎年恒例ともなった各社のエイプリルフールネタをまとめてみました。Twitterやfacebookのタイムラインもこれ系の話題でだいぶ賑わっていましたね。

Google Map

有名スポットはドットで描かれていたり、隠れキャラも各地にいました。

緯度、経度0度の地点には竜王が…

ドラクエパラダイスとのコラボのようですね。

今年一番の話題作ではないでしょうか。標準機能にして欲しいくらいの完成度ですね。

Google日本語入力

Google 日本語入力 - モールスバージョン

こちらから実際にモールス信号入力を体験できます。やってみると意外と難しくてハマります。

Hatena　B!KUMAフールズ

B!KUMAフールズ

女性向けのアプリB!KUMA ガールズのパロディです。

R25

R25からは年配の人向けの「R65」が創刊するいうニュースが。　記事は「今更困る!! 熟年離婚をかわす方法」「エンドユーザーに聞く墓石ランキング」などだそうです。

au

auではCMでもおなじみの星一徹プロデュースの「大リーグボール養成スマートフォン」のリリース告知です。

Yahoo!

Yahoo!では誰でも参加できる「スマート選挙」を開催。

面白法人カヤック

2012年4月1日についた嘘41個ぜんぶ見せます！

さすがというかトップページが全てうそで塗り固められています。

ぐるなびWEDDING

全容はこちらから。楽しそうな職場ですね。

少年ジャンプ

ウソと言えばこのキャラ。ONE PIECEのウソップにサイトジャックされました。

ドミノピザ

画面を見つめるだけで注文できるサイトを開発したとの事。うそのお詫びにクーポン券がもらえます。

ブクログ

本棚がホコリまみれになってしまったので清掃中だそうです。これってウソではない気もしますが。。

ロリポップ

記事はこちらから。この快挙を成し遂げたお婆さんがいいキャラだしてます。

WEBの恒例行事となったエイプリルフールネタですが、近年はTwitterやfacebookの普及で情報の広がりが加速した感じですね。NHKの公式Twitterでのネタ発言がクレームになって謝罪したという話もあるようなので、悪ノリし過ぎずに今後もユーザーを楽しませてくれるネタを期待したいですね。

ホラー好きな人にオススメ?「Blood Bath」

2012-03-27T00:00:00Z

バスルームを血まみれにできちゃうという生粋のホラー好きにはたまらないアイテムをご紹介します。

まぁホラー好きな人が欲しがるアイテムなのか分かりませんが、シリーズで作ったところにただならぬこだわりを感じます（かね？？）

風呂場だけじゃ飽き足りないという方はこちらも。。

PVもかなり凝ってます。（ホラー苦手な方は見ない方がいいかも）

余談ですが、欧米のホラーは殺人鬼などが登場し残虐さや過激な映像でシンプルに怖さを演出しますが、アジアのホラーは何かしら恨みを持った幽霊が登場し、怖さの裏側にその幽霊の悲しい境遇などが作りこまれているそうです。その為かアジアの作品は文化が違うと理解しづらいのでシンプルに誰でも怖がれる欧米作品と違って全世界的ヒットとはなりにくいようですね。

Blood Bath | spinninghat.com

無料で使えるワイヤーフレーム作成ツールまとめ

2012-03-26T00:00:00Z

ワイヤーフレームやモックアップを作成する際に利用できるWEBツールのまとめです。

Lumzy

Mockup Builder

Tiggzi

Frame Box

iPhone Mockup

Pencil Project

Cacoo

きちんと設計をする際はMS ExcelやPower pointなどを利用する事が多いのですが、MTGしながらラフを書いたりするにはWEBツールの方が便利な場合があります。やはり「Cacoo」が国産ツールなので個人的には一番使いやすいですね。

以前にまとめた記事もありましたのであわせてどうぞ。

WEB制作者必見。便利なワイヤーフレーム作成ツールまとめ

10 Completely Free Wireframing and Mockup Tools

WEBディレクターの為の便利ツール「Support Detail」

2012-03-23T00:00:00Z

エラーが起きていると言われたけど自分のPCでは再現しない。そんな時はまずは相手の環境を調べないといけません。そこで役に立つのがこのツールです。

自分のPCでもOS、ブラウザの種類・バージョンをどうやって確認したらよいか分からないという方も多くいます。そんな時にOS・ブラウザ・IPアドレス・Flashのバージョン・ディスプレイの解像度などがひと目で確認できるのがこの「Support Detail」です。

使い方はいたってシンプル。このページにアクセスするだけで自分の環境が一目瞭然です。さらに入力したメールアドレスに結果を送信したり、CSVやPDFで結果を出力することも可能です。

コロラドの制作会社Imulus社が公開しており、誰でも無料で利用できます。こういったツールはデザインがおざなりな事が多いですが、綺麗で見やすいインターフェースなのもいいですね。