はてなブックマーク

WEBディレクターになりたいと考えている人や、WEBディレクターとして働いている人のために、必要な知識や技術など幅広く紹介しています。 以前WEBディレクターの仕事について簡単に記事にしましたが、今回からもう少し詳しく、1つ1つの仕事について紹介させていただこうと思います。 WEBディレクターの仕事というのは非常に多岐にわたっていて、一言でこんな仕事をしているよ！とは言えません。Webディレクターはプロジェクトの受注からサイト企画・進行管理・運用などさまざまな業務に関わり、案件を滞りなく進めていくことが主な役割です。そのため基本的にサイト制作のすべてにWEBディレクターは顔を出します。だからこそ一言でWEBデ...

以前WEBディレクターの仕事について簡単に記事にしましたが、今回からもう少し詳しく、1つ1つの仕事について紹介させていただこうと思います。 WEBディレクターの仕事というのは非常に多岐にわたっていて、一言でこんな仕事をしているよ！とは言えません。Webディレクターはプロジェクトの受注からサイト企画・進行管理・運用などさまざまな業務に関わり、案件を滞りなく進めていくことが主な役割です。そのため基本的にサイト制作のすべてにWEBディレクターは顔を出します。だからこそ一言でWEBディレクターの仕事を表すのは難しいんですね。 オリエンテーション・ヒアリング クライアントからお問い合わせを受け、受注に至るまでには大きく分けて5つのフローが存在します。その中から今回はWEBディレクターの最初の仕事であるオリエンテーションとヒアリングのポイントを紹介させていただきます。オリエンテーションやヒアリングはW

私はロゴデザインギャラリーをボーっと眺めるのが好きで、よく海外のそういったサイトを覗き、気に入ったロゴをパソコンに保存しているんですが、だいぶ適当に保存しているので、まったく整理されておらず、ちっとも見返さないという状況が続いていました。ですがこれではせっかく保存しても意味がないので、今日からこのブログを利用してまとめていこうと思います。 ロゴを整理する1発目の今日は[ハートをモチーフにしたロゴ]をまとめてみます。私のパソコンには100近くのハートをモチーフにしたロゴが保存されていましたが、その中から特に私が気に入っているロゴを29個紹介させていただきます。 01.Pet Home 02.Mari PODOLOGA 03.Lumen Tights 04.WEDDING 05.Lovelndo 06.LOVE INDO 07.Loading… 08.Bella Vilta 09.KAVANM

今年のお盆休みは友人と旅行に行ったり、ボルダリングの体験をさせてもらったりしていて、ブログの更新が疎かになっていました。申し訳ありません。今週は月曜日から時差ボケのような感じで、あまりシャッキっとできていないんですが、頑張ってブログを更新して行こうと思います！ 今日は、前回の「デザイナーだから考える。赤色が与える27の効果と6つの活用例」に引き続き「デザイナーだから考える。青色が与える27の効果と7つの活用例」について紹介させていただきます。青を基調としたデザインを考えるときにこの記事が役立てば幸いです。 青色を利用した7つの活用例 まずここでは、青色を取り入れたデザインや製品などを例に、青色が持つ効果やイメージについて紹介させていただきます。 聖母マリアのマントの青は「神秘的な印象与える」 地球上に存在する「物」としての青は、手にとって触れることの難しい色です。例えば世界中で見ることので

優秀なWebデザイナーって何だろう。と考えたことはありませんか？私は昔からそんなことを考えているんですが、最近、優秀なWebデザイナーについて、なんとなくですが気づいたことがありましたので、今日はそのこと(優秀なWebデザイナーの特徴)についてまとめてみようと思います。 こうして優秀なWEBデザイナーに共通している特徴をまとめてみると、私はまだまだ小さい人(Webデザイナー)だなと痛感させられます。優秀なWebデザイナーの方々の多くは、人としても大変魅力的で、彼らの周りには自然と人が集まっているように感じます。 今日の記事は、あくまでも私が気づいた点であるために、必ずこれらができているから優秀なWebデザイナーであるとは限りません。ですがこの記事が「優秀なWebデザイナーとはどんな人なのか」「どうすればそうなれるのか」という事を考えるきっかけになれば幸いに思います。 人として共通している1

先日Evernoteを整理していたら、適当にメモされたGoogleの便利な検索機能がいくつもありましたので、今日はそれをまとめておこうと思います(暇なので)。あと小ネタもいくつかありましたので、ついでにそれもまとめちゃいます。こうして改めてまとめてみると「Googleってやっぱ便利だなー」と惚れ直しました。今日紹介する検索技などを使用して、皆さんももっと便利にgoogleを使いこなしちゃってください！ ちなみに左のアイキャッチは、2012年4月24日のgoogleTOPページです。4月24日はファスナーを現在の形に仕上げたギデオン・サンドバックさんの誕生日のため、googleのTOPページがこのユニークなロゴになったようです。 Googleの検索演算子15 link:指定したページの被リンクを表示 使い方：[link:http://www.google.co.jp/] 補足：対象ページに対

WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在

先日[ホームページ成功への道はすべてここから始まる。目的・目標の明確化]を書かせて頂いたんですが、「目的が決まっても、目的を達成させるためにどんなWEBサイトを作ったらいいのかわからない」と読者の方から連絡をいただきましたので、今回は【目的を達成させるための最適なWebサイトのタイプ(種類)】を紹介したいと思います！ WEBサイトには多種多様な目的があり、その目的を叶えるためにさまざまなタイプのWEBサイトが存在します。今回はこれらをわかりやすく見比べられるように表にしてみました。新しくWEBサイトを作るときなどに参考にしてみてください。 WEBサイトの目的とタイプは生まれ続ける。 インターネット上には、さまざまなタイプのWEBサイトがあります。商品を直接販売するための「ECサイト」、会社情報を伝えるための「コーポレートサイト」、商品やサービスを認知してもらうための「プロモーションサイト」

毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも

実際にホームページを作り始める前に、プロのWEBクリエイター達がもっとも意識する点は、おそらく【Webサイトを制作する目的・目標を明確にすること】だと思います。なぜこの目的・目標の明確化をもっとも意識するのか。それは目的・目標こそがホームページの成功を根底から左右させるからです。 今日はそんな目的・目標の大切さや、明確にする方法を紹介させていただきます。あなたがクライアントのために作ったWEBサイトには明確な目的・目標がありますか？新人webディレクター・デザイナーには特にこのことを考えていただきたいと思います。 ほとんどの人は、目的や目標を自然に考えながら生活をしています。 例えば鏡の前で『夏までにやせなきゃ！こんな体、彼氏に見せられない！』と思った場合。人は『彼氏にもっと好きになってもらうために、美しく引き締まった体を作り、キレイだと思ってもらう』という目的を作り、どんな手段を用いて目

今年の5月末に、友人5人と鎌倉にお寺・神社巡りの旅行に行かせていただいたんですが、そのたびの途中、ちょうど鳥居をくぐりぬけた時に「なんで鳥居って赤が多いのか」という話題になりました。もちろん誰も的確な答えを持ち合わせていなかったんですが、なんとなく「力強くて神々しいからじゃない」見たいな感じに意見がまとまりました。 もちろん私は、WEBクリエイターとして「家に帰ったらちゃんと赤が使われる理由を調べよう！」と考えたわけですが(嘘です)、調べてみると、これがなかなか面白いものでした。色って奥が深いですね。 と言うわけで、本日は赤について調べた事などを紹介させていただきます。赤を基調としたデザインを考えるときなどに役立てていただければ幸いです。 赤色を利用した6つの活用例 まずは【赤色を利用した6つの活用例】を紹介させていただきます。その後【赤色が与える27の効果】について紹介させていただきます

皆さんは「Online Color Challenge」というサイトをご存知ですか？昨日ロケットニュースで取り上げられていたので、久しぶりに利用してみたんですが、0点だったので安心しました。え？「なんで0点で安心するの」って？ この「Online Color Challenge」というサイトは、自分の色彩感覚を採点してくれるサイトなんですが、点数が低ければ低いほうが成績が良いという事になっています。なので0点はパーフェクト・満点なんです。 色彩感覚が採点できるOnline Color Challenge 下記は「Online Color Challenge」のキャプチャーです。 Online Color Challenge このサイトは、左端と右端の色を基準に、ランダムに並んだ20のカラーパネルをドラッグ・ドロップで移動させ、どれだけ正確にグラデーションを完成させることができるのかを図って

今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML　テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top

昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ

先日ユーザビリティに関する記事を書きましたので、アクセシビリティについてもまとめることにしました。先日の記事はこちら⇒【Webユーザビリティを改善するための5つのポイントと方法】 アクセシビリティはユーザビリティに比べるとあまり重要視されていない感を受けますが、業種問わずどんなWEBサイトであれ、最低限の対策は行うべきだと私は考えています。理由は多々あるんですが、1番大きな理由は障がい者の方達の多くが意外にもWEBサイトで情報収集をしているという事と、WEBサイトの発展に期待している事を知ったからです。 ちょっと長くなりそうなのでこの話は後程しますね。 まず、アクセシビリティ対策を行うことで得られる効果についてですが、アクセシビリティを改善することでアクセス数が増える(業界によっては大幅に増える)と言われています。これには基本的に2つの理由があり、1つは障がい者と認定されている人(総人口の

先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達！]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。 まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。 この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤ

たいていの人は何らかの商品を購入する時、似たような商品の中から一番気に入ったものを買うと思います。そのため、自社商品を他社商品よりも多く購入してもらうには、お客様に「これが一番良い！」と思ってもらえる商品でなければなりません。 お客様に自社商品を一番だと思ってもらうには、競合他社の調査・分析は欠かせません。自社と他社の違い(差)を理解することが、より優れた商品やサービスの開発に繋がります。 これはWEBサイト制作でも同じです。競合サイトの調査分析をすることで、どのようにWEBサイトを組み立てたら、競合サイトよりも優れたサイトになるかが見えてきます。 そこで今回は、競合他社のサイト調査・分析に必要なチェック項目と、役立つツール・調査方法を簡単にまとめて紹介したいと思います。 最初にライバルだと思われる会社のターゲットユーザーを調べることが必要です。これを調べると【実際にその企業がライバルと言

SEOの世界では、内部要素20％、外部要素80％の割合で検索エンジンは順位を決めていると言われています。ですがSEO対策を行う上で、外部対策も当然必要なんですが、内部SEO対策もたいへん重要になってくるんです。 SEO対策に着手する場合、内部対策から行うのが基本です。それは内部対策にはどのキーワードで上位を狙うのか！という最も重要な要素が含まれているからなんです。このキーワードが決る前に外部SEO対策を行っても、あまり効果を得ることができません。キーワードの選択は、SEO対策が成功するかどうかがかっていると言っても過言ではないくらい重要です。 キーワードを実際に選ぶ前に、どのような目線で、どのような心構えで選んでいったら良いかを紹介します。 ユーザー目線で考える 自分のHPに訪れるユーザーの視点でキーワードを選ぶことがとても大切です。思い付きや思い込みで検索キーワードを決めてはいけません。

自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ

今日は私が集めているアイコンのいくつかを紹介させていただきます。今回は商用利用も無料(商用フリー)でOK！という気前のいい手書き風のアイコンをまとめました。ここで紹介するアイコンは全てリンクも不要で使えますが、ダウンロードして使うときは念のためライセンスの確認をしてくださいね！ ではどうぞ。 19 Freehand drawn sketch icons ダウンロード先:Visit site 実際に手書きで作成したものをスキャンしてイラレでクリーンアップしたものです。 HAND DRAWING ICONS SET ダウンロード先:Visit site まさに手書き中の手書きといったアイコンです。 Handycons 2 ダウンロード先:Visit site メディア関連の手書き風アイコンです。油絵っぽい感じが実にクールですね。 FreeHand ColorStroked icon pac ダ

制作スタッフの種類や役割、また、それらをあらわす肩書きを理解できていなければ、プロジェクトに関わるスタッフの人選を行うWEBディレクターになるのは難しいでしょう。そのためWEBディレクターを目指す人は、(重要ではないですが)これから紹介する種類と役割を覚えておく必要があると思います。 一昔前は(2005年位かな)、一般的にWEB制作をする人は、WEBデザイナーだけだと思われていたようです。また実際にディレクション業務をしていても、自分の仕事に対するハッキリとした肩書きが無く、雑用係だなんて考えている人もいたと聞いたことがあります。やり甲斐のある仕事でも、雑用係だなんて考えてしまったら、やり甲斐も楽しさも薄れてしまいますね。私は基本的に肩書きなんてどうでもいいと考えていますが、こんな話を聞くと肩書きもそれなりに必要なのかもしれないと感じました。 現在では、役割ごとにある程度区別がつくようにな

ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli