お客様のサイトデザインを手掛ける際、ストックフォトサイトから写真を見つけることがよくある。顧客の事業を正しく表現するために、現実に即した写真を見つける必要があるのだ。 しかし、目当ての写真がストックフォトからは見つからないことも多く、「この写真はイメージと違う」というフィードバックをよく受ける。 無理に探そうとすると写真選定が延々と続きかねない。そこで、最近は以下の３つの点に重点を置くことにした。 ①実際に使う写真は早めに確定させる 画像選定の確認は複数回行われるが、基本的に後回しにせず、早めに写真が必要かどうか、入手可能かどうかを判断する。 ②顧客側で近しいイメージの写真を持っていないか確認する 企業の個性を表現するには、実際に撮影した写真を使用することが最適である。 ③写真では表現できない内容は言葉で伝えることに徹する メッセージによって、内容をビジュアルで表現するか、言葉で伝えるかが

以前勤めていた会社はデザイナーが遠隔地にいたため、クライアントと直接会わないことが多かった。そのためディレクターがクライアントに直接話を聴き、その内容を社内に持ち帰ってデザイナーに伝える、という制作工程が一般的だった。 デザイナーの中には、それでも器用にデザインができてしまう人と、そうでない人がいた。そして後者のデザイナーからは、こんな声がよく上がっていた。 前段のインプットが十分ではないので作りにくい クライアントと直接話ができないので作りにくい この時ディレクターをやっていた私は、この意見に一理あると思った。 そこで、前段の設計資料をサマリーせずにフルで共有したり、オリエンをより丁寧にしてみたり、クライアントとの打ち合わせに同席してもらう機会を設けるようにした。 結果どうなったかといえば、変わらなかった。なぜなら、デザインのクオリティが低かったのは、インプットやクライアントと直接会うか

企業のウェブ担当者から「ホームページの値段は、なぜ会社によってこうも変わるのか」ということをよく聞かれます。 確かに発注企業からすれば、同じ規模のウェブサイトなのに会社によって数百万円単位で金額が変わるのは謎の現象でしょう。 実際のところ、ウェブ制作の値付けの基準は会社によって千差万別で、一概には語れませんが、その前提の上で、上記のような質問をいただいた際には、私は以下のように、「ウェブ制作会社の値付けの基本法則」をお話ししています。 価格を変える3つの要素 ウェブサイトの価格は、主に以下の3つの要素で変動します。 会社の規模 実施するタスク量 スタッフの経験・スキル 一つずつ解説していきましょう。 要素1：会社の規模 会社の規模は、価格にある一定の影響を与えています。比較的規模が大きなウェブ制作会社に見積もりを取ったら価格が2～3倍も違った、ということは珍しくありません。 ウェブサイトの

WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

「もっと話上手になれたらいいのに」と思っている人は多いのではないでしょうか。 普通のビジネスパーソンは、アナウンサーのような卓越した話術を身に付ける必要はありません。しかし、話上手になることができれば、交渉が得意になり、営業も人事評価も転職活動も有利に進められるようになります。仕事におけるメリットは計り知れません。 私たちの会社でも、特に顧客と直接対話する機会が多いディレクターやデザイナーには、業務知識だけではなく、顧客との話し方についてもなるべくフィードバックしています。会話のクオリティは、サービスの品質や満足度に深く関わると思うからです。 最近は、会話ではなく、メールやチャットで済む機会も増えています。一方で、話上手な人はテキスト・コミュニケーションも大抵上手な印象があります。話術の中には、コミュニケーションに共通する普遍的ななにかが含まれているのでしょう。 こんな記事を書いてはいます

ベイジでエンジニアをしている野村です。 ベイジには2012年の新年ともに入社し、WordPressやMovable TypeなどのCMSのカスタマイズなど、サーバーサイドの開発を中心に行っています。今後もそのあたりの情報を発信していきたいと思います。 今回は、WordPressについて。 WordPressはブログシステムというより、もはやCMSといっていいでしょう。インストールなどの設定も簡単、自由にカスタマイズできるプラグインやデザインテーマも豊富、何よりオープンソースで無償、ということで世界中で広く使われています。 このように数多くのメリットがあり、コストパフォーマンスが非常に高いWordPressですが、最近、セキュリティ上の問題を理由に、WordPressの使用を禁止している企業にしばしば出会います。 確かにWordPressは特別セキュアなCMSではありませんが、他の多くのCM

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ

現在公開中の自社サイトリニューアル時に悩んだことの一つが「自分たちをどう名乗るか」ということでした。様々なことを熟考した結果、「web制作会社」が相応しいと判断したのですが、その結論に至るまでの諸々の考えを、改めてまとめてみました。 目次web制作業の実態業界で嫌われている「制作」という言葉web制作に対する市場ニーズ事業ドメインを変えるリスクドリルと穴の話ブランド・レレバンスとブランド選好性顧客の選考プロセス顧客を具体的にイメージする私たちがweb制作会社でなくなる時web制作業の実態web制作会社というのは、一般的には、「企業から依頼を受けてwebサイトを作ることができる会社」と認識されていることでしょう。しかし、具体的な業務内容は千差万別です。 2000年代中頃のFlash全盛時代あたりまでは、グラフィックデザインから派生した商業デザインの一形態として、ビジュアルデザインにプログラミ

CLIENT トライバルメディアハウス様 WORK BtoBサイト制作 MODEL 池田紀行様・亀井大樹様・秋元祐花様 佐々木俊祐・塚元舞賀・他

私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

今年の3月に、クリーク＆リバーさん主催のアカウントプロデューサー向けの社内研修のトークセッションにお声いただくという機会がありました。そのトークセッションに先立ち、プロデュース業をするうえで私なりに意識していることを整理していたのですが、ある程度形になったので、遅ればせながらこのブログで共有しようと思います。 その冒頭でも触れたのですが、私自身はWebデザイナーとしてこの業界に入り、Webデザイナーとしての影響力を高めるためにディレクションやプロデュースに足を踏み入れただけで、今も昔も、Webプロデューサーという仕事を目指したことはありません。 そのため、私は果たしてWebプロデューサーなのか？と問われるとよく分からなくなります。自分が行っている業務内容でいえば、デザイナーでもあるし、アナリストでもあるし、インフォメーションアーキテクトでもあるし、UXデザイナーでもあるし、営業マンでもある

スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

iOS7の発表で、フラットデザインというものがより一層注目されているように思います。その前からも、私のFacebookのフィードやGunosyには、フラットデザイン関連の記事が、ほぼ毎日のように流れてきており、注目のほどがうかがえます。 ただ、このフラットデザインブームに強い違和感を覚えるのは私だけでしょうか。特にPCサイト向けのWebデザインにフラットデザインを取り入れよう、みたいな動きに関しては、何かが間違っているような気がするのです。その思いを整理するため、少しまとめてみました。 そもそもフラットデザインが成立する条件は？ 私が初めてフラットデザインという言葉を聞いたときに思い描いたのは、単にグラデーションや影といった立体表現を行わないデザイン、という程度のものでした。もちろん、フラットデザインとは端的にはそういうことなのだとは思いますが、デザインから立体の概念を消し去ることは、表層

仕事ができる人の条件、みたいな記事をしばしば見かけますが、私の中では「仕事ができる人＝メールの返事が早い」というイメージがあります。100%そうとは言い切れませんが、仕事ができる人は結構忙しいはずなのにメールの返事が早い、というのはある程度の確率で当たっているように思います。 では、仕事ができる人は、頭の回転が尋常ではなく、意思決定が超高速だったり、あるいはそもそものタイピング速度が通常の3倍だったりと、超人的な能力を持っているということなのでしょうか。 きっと、そうではありません。仕事ができる人というのは、フィジカルにスピードが速いわけではなく、仕事ができる人特有の「思考パターン」を持っているからだと思います。「メールの返事が早い」というのは、その「思考パターン」がみちびく現象の一つにすぎないのでは、というのが私の考えです。特に、重要度の高くないメールの扱い方に、仕事ができる人の行動パタ

年始の社内打ち合わせで、会社の目標と各自の人生計画は繋がっているべきだ、という話をみんなで行いました。その中で特にこのテーマについて盛り上がったので、ブログにまとめてみました。 老後に必要なお金と年金について考えてみる あなたは、いくら貯金があれば、安心して老後を暮らせますか？ 私はファイナンシャルプランナーではないので、詳細は各自お調べていただくとして、様々な話をざっと総合すると、以下のような試算にまとめられます。条件としては、60歳で引退し、60歳から85歳まで夫婦で生きると仮定し、子育ては終わってて、家は持っている（ローンの返済は終わっている）場合です。 なんだか、思ったよりたくさん貯金していないと厳しそうですね。しかし安心してください。わが国には年金という制度があります。年金の受給額は人によって異なるので詳細はこちらも各自お調べいただくとして、現行制度を元に少し多めに、だいたい各自