新人WEBディレクターに教えたい。オリエンテーションとヒアリング
以前WEBディレクターの仕事について簡単に記事にしましたが、今回からもう少し詳しく、1つ1つの仕事について紹介させていただこうと思います。 WEBディレクターの仕事というのは非常に多岐にわたっていて、一言でこんな仕事をしているよ！とは言えません。Webディレクターはプロジェクトの受注からサイト企画・進行管理・運用などさまざまな業務に関わり、案件を滞りなく進めていくことが主な役割です。そのため基本的にサイト制作のすべてにWEBディレクターは顔を出します。だからこそ一言でWEBディレクターの仕事を表すのは難しいんですね。 オリエンテーション・ヒアリング クライアントからお問い合わせを受け、受注に至るまでには大きく分けて5つのフローが存在します。その中から今回はWEBディレクターの最初の仕事であるオリエンテーションとヒアリングのポイントを紹介させていただきます。オリエンテーションやヒアリングはW
デザイナーだから考える。青色が与える27の効果と7つの活用例
今年のお盆休みは友人と旅行に行ったり、ボルダリングの体験をさせてもらったりしていて、ブログの更新が疎かになっていました。申し訳ありません。今週は月曜日から時差ボケのような感じで、あまりシャッキっとできていないんですが、頑張ってブログを更新して行こうと思います！ 今日は、前回の「デザイナーだから考える。赤色が与える27の効果と6つの活用例」に引き続き「デザイナーだから考える。青色が与える27の効果と7つの活用例」について紹介させていただきます。青を基調としたデザインを考えるときにこの記事が役立てば幸いです。 青色を利用した7つの活用例 まずここでは、青色を取り入れたデザインや製品などを例に、青色が持つ効果やイメージについて紹介させていただきます。 聖母マリアのマントの青は「神秘的な印象与える」 地球上に存在する「物」としての青は、手にとって触れることの難しい色です。例えば世界中で見ることので
私が出会った優秀なWebデザイナーに共通した26の特徴
優秀なWebデザイナーって何だろう。と考えたことはありませんか？私は昔からそんなことを考えているんですが、最近、優秀なWebデザイナーについて、なんとなくですが気づいたことがありましたので、今日はそのこと(優秀なWebデザイナーの特徴)についてまとめてみようと思います。 こうして優秀なWEBデザイナーに共通している特徴をまとめてみると、私はまだまだ小さい人(Webデザイナー)だなと痛感させられます。優秀なWebデザイナーの方々の多くは、人としても大変魅力的で、彼らの周りには自然と人が集まっているように感じます。 今日の記事は、あくまでも私が気づいた点であるために、必ずこれらができているから優秀なWebデザイナーであるとは限りません。ですがこの記事が「優秀なWebデザイナーとはどんな人なのか」「どうすればそうなれるのか」という事を考えるきっかけになれば幸いに思います。 人として共通している1
Googleをもっと便利に使いこなす32の検索技と14のネタ
先日Evernoteを整理していたら、適当にメモされたGoogleの便利な検索機能がいくつもありましたので、今日はそれをまとめておこうと思います(暇なので)。あと小ネタもいくつかありましたので、ついでにそれもまとめちゃいます。こうして改めてまとめてみると「Googleってやっぱ便利だなー」と惚れ直しました。今日紹介する検索技などを使用して、皆さんももっと便利にgoogleを使いこなしちゃってください！ ちなみに左のアイキャッチは、2012年4月24日のgoogleTOPページです。4月24日はファスナーを現在の形に仕上げたギデオン・サンドバックさんの誕生日のため、googleのTOPページがこのユニークなロゴになったようです。 Googleの検索演算子15 link:指定したページの被リンクを表示 使い方：[link:http://www.google.co.jp/] 補足：対象ページに対
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
凄すぎて脱帽する！世界の斬新なアイデア広告12選
いやー夏ですね。7月はエアコンを絶対に付けないぞ！と決めたものですから、ダラダラと汗を流しながらブログを書いています。 こうも毎日暑いんじゃ、皆さんも集中して記事を読めないと思いましたので(普通はエアコンつけてるから平気か…)、今日は軽く読める記事を書くことにしました。読むと言うよりも見るだけで良い記事です。 その肝心の記事ですが、今日は世界中の斬新なアイデア広告を紹介させていただくことにしました。私達クリエイターは日々新しいアイデアを生み続けなければなりません。そのためすばらしいアイデアに触れることはとても大切です。今日は世界中のすばらしいアイデアに触れてインスピレーションを刺激させちゃってください！では、どうぞ。 01.ベンチスタンプ ファッションブランドの広告です。「短パン売り出し中」と書いてありますね。ベンチに文字を掘り込み、座った人の太ももにその彫った文字を残す広告ですね。街中で
デザインのインスピレーションが得られる最強Webサービス7選
毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[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
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
Webユーザビリティを改善するための5つのポイントと方法
先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達！]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。 まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。 この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤ
競合サイト調査・分析に必要なチェック項目と役立つツール達！
たいていの人は何らかの商品を購入する時、似たような商品の中から一番気に入ったものを買うと思います。そのため、自社商品を他社商品よりも多く購入してもらうには、お客様に「これが一番良い！」と思ってもらえる商品でなければなりません。 お客様に自社商品を一番だと思ってもらうには、競合他社の調査・分析は欠かせません。自社と他社の違い(差)を理解することが、より優れた商品やサービスの開発に繋がります。 これはWEBサイト制作でも同じです。競合サイトの調査分析をすることで、どのようにWEBサイトを組み立てたら、競合サイトよりも優れたサイトになるかが見えてきます。 そこで今回は、競合他社のサイト調査・分析に必要なチェック項目と、役立つツール・調査方法を簡単にまとめて紹介したいと思います。 最初にライバルだと思われる会社のターゲットユーザーを調べることが必要です。これを調べると【実際にその企業がライバルと言
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
商用利用も無料！手書き風アイコン122種類！
今日は私が集めているアイコンのいくつかを紹介させていただきます。今回は商用利用も無料(商用フリー)でOK！という気前のいい手書き風のアイコンをまとめました。ここで紹介するアイコンは全てリンクも不要で使えますが、ダウンロードして使うときは念のためライセンスの確認をしてくださいね！ ではどうぞ。 19 Freehand drawn sketch icons ダウンロード先:Visit site 実際に手書きで作成したものをスキャンしてイラレでクリーンアップしたものです。 HAND DRAWING ICONS SET ダウンロード先:Visit site まさに手書き中の手書きといったアイコンです。 Handycons 2 ダウンロード先:Visit site メディア関連の手書き風アイコンです。油絵っぽい感じが実にクールですね。 FreeHand ColorStroked icon pac ダ
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
何だこれ！？脱帽するほどの斬新なアイデア
今日は土曜日ですので、軽めの記事を書こうと思います。 すばらしいアイデアやすばらしいデザインに触れることはクリエイターとして大事なことです。私達は物を作り出す仕事をしているので、ひらめきを大切にしなければなりません。 ひらめきを生むには、普段から多くの情報に触れる必要があります。それも偏った情報ではなく、多岐にわたった様々な情報に触れるほうが、よりすばらしいひらめきを生み出す可能性が高まります。それがどんなにくだらない情報であっても、ひらめきに変わる可能性があるんです！ そこで今回、私が「これは脱帽するほどの斬新なアイデアだ！」と思えた物を紹介いたします。 【脱帽するほど】なんて立派なタイトルをつけてしまいましたが、内容はだいぶ軽いものです。だいたい私は帽子が嫌いなんで脱帽する帽子を持っていません。時間にゆとりがあれば、箸休め的な感覚で読んでもらえればよろしいかと思います。
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！ 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
Webディレクターだから間違えるECサイトの提案(商品詳細)
どんな業界・どんな職業に就いても同じことが言えるのですが、その業界で働いているからこそ学べることがあります。ですが、この業界特有の専門知識のせいで、勘違いが生まれてしまうこともあるんです。例えば、『伝えたい事は簡潔に書き、画面のスクロールは避けるようにする』これは私達WEB業界で働いている人であれば、よく知られたコンバージョンを上げるためのポイントの1つです。 ただ、実はこの『伝えたい事は簡潔に書き、画面のスクロールは避けるようにする』という事を提案したがために、売れないECサイトを作ってしまうことがあります。なぜか分かりますか？ それは『人は買いたい商品の情報であれば、詳しく知りたい』と考えているからなんです。 今回は、WEB業界では正しいと思われているが、実は間違っている可能性のあるECサイトの提案について説明させていただきます。 本当に買いたい人は商品の詳細を詳しく知りたい webデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
