新人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サイトのタイプ(種類)
先日[ホームページ成功への道はすべてここから始まる。目的・目標の明確化]を書かせて頂いたんですが、「目的が決まっても、目的を達成させるためにどんなWEBサイトを作ったらいいのかわからない」と読者の方から連絡をいただきましたので、今回は【目的を達成させるための最適なWebサイトのタイプ(種類)】を紹介したいと思います！ WEBサイトには多種多様な目的があり、その目的を叶えるためにさまざまなタイプのWEBサイトが存在します。今回はこれらをわかりやすく見比べられるように表にしてみました。新しくWEBサイトを作るときなどに参考にしてみてください。 WEBサイトの目的とタイプは生まれ続ける。 インターネット上には、さまざまなタイプのWEBサイトがあります。商品を直接販売するための「ECサイト」、会社情報を伝えるための「コーポレートサイト」、商品やサービスを認知してもらうための「プロモーションサイト」
デザインのインスピレーションが得られる最強Webサービス7選
毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも
色だけでダメなデザインを良いデザインに変える方法Vol.2
今日は日曜日ですね。皆さんは休日をどのように過ごしていますか？制作業って休日も仕事をしなければならない時がありますよね。私も会社員のころ納期間近の時は無理やり出勤させられた記憶があります。 でも今日は昼間っからビールを飲み、そしてピザを食べながら映画を見て、グーたらと何もしないで一日を終わらせようと計画しています(上手くいけばですが)。 皆さんもせっかくの日曜日なのでビールを飲みながら、グーたらと軽い気持ちで私の書いた記事を読んでみるのも良いんじゃないでしょうか。さらっと読める内容だと思いますし。 で、肝心の今日の記事ですが、前回の[色だけでダメなデザインを良いデザインに変える方法Vol.1]に引き続き、色だけでダメなデザインを魅力的に変える方法を紹介したいと思います。では、早速本題の記事をどうぞ！ 色数を制御し文字を際立たせ印象的にさせる 今回は、セールで使われるポスターを例に、ダメなデ
デザイナーだから考える。赤色が与える27の効果と6つの活用例
今年の5月末に、友人5人と鎌倉にお寺・神社巡りの旅行に行かせていただいたんですが、そのたびの途中、ちょうど鳥居をくぐりぬけた時に「なんで鳥居って赤が多いのか」という話題になりました。もちろん誰も的確な答えを持ち合わせていなかったんですが、なんとなく「力強くて神々しいからじゃない」見たいな感じに意見がまとまりました。 もちろん私は、WEBクリエイターとして「家に帰ったらちゃんと赤が使われる理由を調べよう！」と考えたわけですが(嘘です)、調べてみると、これがなかなか面白いものでした。色って奥が深いですね。 と言うわけで、本日は赤について調べた事などを紹介させていただきます。赤を基調としたデザインを考えるときなどに役立てていただければ幸いです。 赤色を利用した6つの活用例 まずは【赤色を利用した6つの活用例】を紹介させていただきます。その後【赤色が与える27の効果】について紹介させていただきます
配色に悩んだときに、きっと役立つ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つのポイントと方法】は下記の項目で紹介するヤ
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的には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
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！ 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
