成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
失敗しないためのウェブ制作会社の上手な選び方【チェックリスト付】 | knowledge / baigie
ウェブ制作の仕事をしていると、「御社以外におすすめのウェブ制作会社を教えてくれませんか？」と聞かれることがあります。 また、「どの制作会社がいいかよく分からない…」「前回選んだ制作会社とはなかなかうまく行かなくて…」と相談されることもあります。 ウェブ制作会社はウェブ制作のプロですが、残念ながら、多くのウェブ制作会社は自らを売り込むことがあまり得意ではありません。 そのため、ウェブ制作業界を超えて多くの人に知られているようなウェブ制作会社は、ほとんど存在しません。ウェブ制作と隣接しているはずのデジタルマーケティング業界やIT系のスタートアップ業界でさえ、ウェブ制作会社のことをほとんど知りません。（もちろん、当社もこれに当てはまります） このような現状だからこそ、ほとんどの発注企業からすれば、ウェブ制作会社は「探しにくい」「見つけにくい」「見極めにくい」のだと思います。 そこで、ウェブ制作業
SaaSがUIデザインに力を入れるメリット | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジでデザインコンサルタントをしている古長です。 ベイジには2019年11年に入社し、SaaS/業務システムのUXリサーチやUI改善提案などの仕事をしています。『knowledge / baigie』では、SaaSや業務システムのUX/UIデザインの勘どころ等を発信していく予定です。 今回はSaaSにおけるUIデザインの重要性についてお話します。 SaaSは急成長している市場の１つですが、急成長の裏には様々な課題が潜んでいるものです。その課題の一つがUIデザイン、というサービスも多いでしょう。 事業の成長スピードに追い付けず、デザイン上の課題を抱えたまま走っているサービス、直感的に魅力を感じにくいUIデザインによって、マーケティング的に苦戦しているようなサービスは、確かに多く見られます。 こういったデザイン上の課題を抱える背景としては、以下のような事柄が考えられます。 優秀なデザイナーを
サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
デザイナーにとって「作る」と同じくらい大切なこととは？ | ベイジの日報
会社によって仕事のスケジュール感はまちまちだ。3～4ヵ月ごとにプロジェクトが変わるような環境もあれば、1週間単位でコロコロと変わる環境もある。そんな環境の違いがデザイナーに与える影響は、とても大きいように思う。 私は20代の頃、代理店からの案件を多く請け負う会社にいたことがあるが、タイトなスケジュールで尚且つ納品日の後ろ倒しを相談する余地もなく、とても苦労した経験がある。それと比べてベイジは3～4ヵ月、もしくはもっと長くかかるプロジェクトもあり、しかも直クライアント。スケジュールも相談しやすい関係性で成り立っている仕事が多いため、とても働きやすい。 こうした環境は非常にありがたいものの、逆に新たにゼロからデザインを作る機会も少なくなっている、とも言える。レイアウトも配色もビジュアルの方向性も何も決まっていないところから、デザインの方針・システムを考えていく作業。面白さもあるが、このあたりを
入社2年目で身につけたwebデザインの5つの習慣 | ベイジの日報
ベイジに入社して、もうすぐで2年目が終わる。案件を重ねていく中で、トップページのデザインを作るときに、多くの失敗と学びがあった。その経験から、習慣化したことがいくつかあるので、まとめてみようと思う。 1. ラフを書いてから手を動かす ベイジでは、デザイナーがwebサイトの各画面のワイヤーフレームを作成する。その際、ディレクターと認識を合わせるため、手書きのラフを書くことがある。 以前は、いきなりデザインを起こしていたのだが、1ページ作り終えた際に「全体のバランスが悪い、レイアウトが単調でメリハリがない」と指摘されることがあった。そこで、ワイヤーフレームを作成するときと同じように、デザイン着手前もラフを書くようにした。 すると、事前に全体像を俯瞰して見ることができるので、セクション間のバランスやレイアウトを確認できる。このときに違和感があると、絵に起こしても上手くまとまらないことが多い。慣れ
勇気を出して考えを発信し続ける人だけが得している5つのこと | ベイジの日報
日報サイトの更新が今年からスタッフ各自に任されるようになった。これまでは社内編集スタッフが内容を精査して発信していたが、そのチェック機構が各人に委ねられる形となり、原則として一週間に一度、自分の記事を更新することになる。これは言い換えると、強制的に自分の考えを自分の手で世の中に発信することが義務付けられた、というものでもある。 多くの人に自分の意見を発信するというのはどんな形でも緊張するものだ。加えて所属する企業のイメージにも影響を与えることになるため、やはり緊張を伴うものだろう。皆の運営を見ていると、文章量に制限はないといえど、ある程度自分の考えを分かりやすくまとめるためにリライトの時間をとって編集している人が多い。 人によっては恐怖というレベルかもしれないし、更新することにある程度のストレスも感じるだろう。しかし、仕事をする上での基本スキルとして職種を問わず求められる、自分の考えを主張
ベネフィットまで考えた魅力的なコピーの書き方 | ベイジの日報
先日、ある案件のランディングページで初めて設計を担当した。 はじめての設計を通していろいろな学びがあったが、特に学びになったのが、「ベネフィットを具体的な言葉で示す」ということだ。今回の学びも踏まえて、ユーザーにとってのベネフィットを考えた魅力的なコピーの書き方をまとめてみようと思う。設計やデザインを行う上でコピーまで考える必要がある人の参考になると嬉しい。 ベネフィットとは ユーザーがその商品やサービスを利用することによって得られる利益や恩恵のことを指す。メリットに似ているが、メリットはその商品やサービスの特徴や売りになる部分のことで、ベネフィットはそのメリットの先にある恩恵や利益のことを指す。 ベネフィットを考えたコピーの例 他社との差別化を図るうえで重要となってくるベネフィットだが、良い例、悪い例をあげると以下のようになる。 1. 自社製品のカメラを売りたい場合 【悪い例】○○○は業
100ページ規模のサイトの高速化にService Workerは有効か？ | ベイジの日報
私が関わるとあるプロジェクトで、ページの読み込みを高速化させるためService Workerを導入した。Service Workerとは、PWA（Progressive Web Apps）などブラウザで動作するWebアプリで使用される技術だが、今回はこの技術の一部である「オフラインキャッシュ」を使用して高速化を図った。省略している部分もあるが、おおまかな流れとしては以下のとおりだ。 特定のJavaScriptファイルに任意のHTMLやCSS、画像などのパスを登録する 登録されたファイルはページ読み込み時にロードされ、キャッシュとして以後保持される ページ遷移した場合にキャッシュされているファイルは読み込みが発生しないため表示が速い 例えば、ホームを表示した際に次にユーザーがクリックするだろうと予測される製品一覧ページのメインビジュアルのパスを登録しておけば、実際に製品一覧ページに遷移した
気が利く人が会話中にやっていること | ベイジの日報
ベイジの行動指針の中には、以下のような項目がある。 プロフェッショナルは、気が利く 気が利くとは、他人の責任範囲にも関心を示しサポートすることである。頑なに自分の責任範囲しか実行しないのは気が利かない人間のすることだ。 この行動指針にあるように、プロフェッショナルとは自分のことだけではなく、他人にも興味や関心を持つことができる人のことだ。相手が置かれた立場を理解して、何か役に立てることはないか、こうした方が良いのでは？と考えられることも、気が利く人に備わった特長だと思う。 プライベートで知人と話している時や社外の懇親会に参加した際なども、自分の話をただ聞いているだけで、興味を持って深掘りするような質問がなかったり、話題を広げようという姿勢が感じられなければ、誰もが「自分に対して関心がないのだな」と感じるだろう。 これはビジネスの場でも全く同様で、顧客と打ち合わせをしている際などに、自分たち
スケジュールの主導権を握るために私たちがやっている3つのこと | ベイジの日報
ディレクターである私は毎朝、スタッフ各人の席を回ってスケジュールを確認している。ここのところはいくつかの案件の予定がずれ込んでいることもあり、その都度他のプロジェクトを前倒しして進めるような臨機応変な対応を行っている。 プロジェクト開始時にスケジュールをしっかり立てていても、さまざまな要因に伴って予定を変更することは多々ある。そうした時に比較的調整が効きやすいのはベイジの強みと一つと言える。これは次のような点から成り立っているのではないか。 下請け案件を無くして顧客に直接交渉できる環境にしている 現状では代理店経由の仕事はなく、顧客企業との直接取引となっている。ベイジに新卒で入った人や、代理店との仕事をした経験がない人はイメージがしにくいかもしれないが、代理店が間に入ると双方の情報伝達も間接的になることが多く、スケジュールも融通が利かず、リスケが難しい場面が多々ある。直接取引だからこそ、顧
なぜ言語化することが重要なのか | ベイジの日報
社内の勉強会で「仕事において言語化することの大切さ」についての話を聞いてから、自分でもよく考えるようになった。 コーディングの参考にするためにGoogleの「Firebase」のサイトを観察したことがあるが、そのときに学んだことをきちんとメモしていたおかげで実際の案件で活かすことができた。そのときに「なんとなくどんな感じになっているか」をざっと見ただけでは思い出すことは難しかったかもしれない。 「きちんと言葉にする」といったアウトプットを行うことで脳に情報を定着させやすくなるという話もあるが、そのためには対象をよく理解することが必要だろう。「理解しているから言葉にできる」のか、「意識して言葉にしようとするから理解できる」のか、どちらもあるだろうが、理解と言語化は深い関係があると思う。 事象を言語化しようとすることで、その中にあるルールや法則を意識するようになる。そうして、そのルールをうまく
業務外で勉強時間を確保する私なりのコツ | ベイジの日報
エンジニアが業務外でも勉強するべきかどうかについて、以前ネットで話題になっていた。 いろいろな意見があるとは思うが、私は「プログラムを書くのが楽しい」、「もっとスキルを磨きたい」といった理由でプライベートでも勉強の時間を取るようにしていた。しかし最近は土日の思い立ったときに少し手を動かす程度になってしまっていた。 たしかにプログラムを書くのは楽しいが、スプラトゥーンはめちゃめちゃ楽しいし、マンガも映画も楽しい。勉強を「楽しさ駆動」でやっていこうとすると、これらの強いコンテンツと時間を奪い合うことになる。スキルアップのことを考えるとこのままではよくないと思っていた。 そんな中、先日参加した「Learn Language 2018」というイベントでとても刺激を受けた。私はミーハーなのでネットで見たことがある方々を生で見ただけで楽しかったし、その中のひとりの方には著書にサインまでもらってしまった
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
ユーザーの行動を後押しするコピーライティングとは | ベイジの日報
ベイジには職種としてのコピーライターはおらず、主に戦略フェーズから携わるプロデューサーやディレクターがコピーライティングを担当している。しかし、デザイナーやエンジニアでも制作中のコピーに違和感があれば改善要望をあげるべきだし、また自身でもコピーの良し悪しを判断し、修正するスキルを高めるべきだろう。 webサイトにおける価値の中心はコンテンツであり、その中でも図版や画像ではなく、テキスト情報の質が重要な役割を担っている。フロントエンドエンジニアである自分は、ボディーコピー自体を作成する機会は少ないものの、CTA（コール・トゥ・アクション）やボタンの文言、入力フォームのラベル、エラーメッセージなどを「このコピーでユーザーに伝わるか？」「行動を起こして貰えるか？」という観点から修正することが多い。 これらは、「マイクロコピーライティング」と呼ばれており、コンバージョンボタンや会員獲得への誘導、メ
相手の立場を考えた「気がきく」ディレクションとは | ベイジの日報
対顧客におけるディレクションについて、メールやチャットでのやりとりは日々の業務に当たり前のように浸透している。直接顔を合わせないコミュニケーションが増えているからこそ、物事を伝える際には相手の属性や性格、その時々のシチュエーションなどへの配慮を欠くと、望まない結果につながりやすい。 そんな中、相手の状況を見抜く力が優れたいわゆる「気がきく」ディレクターの行動には幾つかの共通点があると私は考えている。例えば、いくつものプロジェクトを掛け持ちながら全体を俯瞰するプロデューサークラスのような管理者と、プロジェクト中に定められたひとつひとつの細かなタスクを現場レベルでこなす担当者に対してでは、同じ事象を伝える場合でも粒度を考慮しているのだ。今日はその共通点を具体的にまとめてみたいと思う。 管理者には「結論第一・注目点の明示・方針の自己判断」 プロデューサーのように俯瞰する立場の人は、同じプロジェク
必ずしも「デザイナーさんが説明すること」が正しいとは限らない | ベイジの日報
最近はSNSの普及に伴い、デザインに対して正直どう感じるか？という意見を、デザインに詳しくない人でも気軽に発言しやすく、かつ可視化されやすい環境になった。またそうなったことで、デザイナーがある種「専門領域に口出しするな」という暗黙の空気を出すことは、信頼を失うことに繋がりやすい世界になったのではないだろうか。 例えばデザインの意図を説明する際、人によって解釈が異なる内容を、デザイナーが論理的な根拠もなく、いかにも素晴らしいものであるかのように説明するのは、デザインを知らない、またはデザインという専門領域には口を出しにくいと感じる人に対して誠実な対応とは言えない。 デザインの説明では、意図だけを伝えること、感じ方まで決めつけないこと、この2つが大切になると心得ておくのが良いだろう。 意図だけを伝える まず作成したデザインを提示した上で、ユーザーはどんな特性を持っているか、そこに対してクライア
ランディングページのデザインに必要な7つの心がけ | ベイジの日報
これまで何度もランディングページ制作に携わる機会があったが、特に入社して1年ほどはうまくデザインをまとめることができず、苦しい思いをすることが多かった。 つまずいたことを思い返すと数え切れない。訴求ポイントをしっかり把握しないまま手を動かしていたこと、提供された原稿やワイヤーフレームをそのまま反映して発想に自由さがなかったこと、表現の引き出しが少なく全体的にワンパターンになることなどは、特に記憶している。 しかし2年の経験を重ねた今は自分なりに気をつけるポイントが見えてきた。そこに注意することで、魅力的で内容が伝わりやすいデザインに仕上げることができる。振り返りとして、私が心がけているポイントをまとめてみたい。 1. 細かい説明を読ませる前に見出しで結論を伝える 内容に興味を持ってもらうためには、まずタイトルに目を留めてもらわなければならない。提供された原稿に見出しが無い場合、必ず結論やユ
編集者の経験から考える文章校正の仕方と注意すべきこと | ベイジの日報
私は数年前まで編集の仕事に携わっていたが、中でも文書や資料の校正作業は胸を張って得意だといえる技能かもしれない。小学生の頃から国語辞典や漢和辞典、地図帳を眺めるのが好きで、本や教科書などに誤字脱字を見つけると、訂正の書き込みをするのが癖になっていた。我ながら細かく、執拗と感じるほどだった。 校正を覚える学校や通信教育もあるが、自分は仕事の中での見よう見まねと編集者用の参考書（校正のやり方、赤字の入れ方や校正記号等が書いてある）で覚えた。これまでこの校正作業について体系的に振り返ったことがあまりないので、少し書いてみたい。 4つの校正作業 文字や文章のチェック作業に関しては「校正」「校閲」「推敲」「査読」などいくつか種類があり、それぞれ意味合いが微妙に異なっている。 「校正」は、誤字・脱字や文法など、文章の表面上の間違いを正すこと。 「校閲」は、文字・文章の意味を読み込み、事実確認をし、文脈
ディレクターがAdobe XDを導入する上で気を付けておくべきこと | ベイジの日報
先日、毎月開催されているAdobe XDの勉強会「Adobe XD meeting #13」に行ってきた。今回は使い方というよりディレクターなどプロジェクトを進行する人向けの内容だった。概要をまとめると以下の3点になる。 1：利用ツール集約で作業効率化 今までどの会社もドキュメント作成には表も図も配置が可能なPowerPointやExcelを使用することが多かった。中でもExcelは国内企業利用率99.4%とのこと。これは誰でもどんな環境でも使えることを意味する。逆に言うと代替えツールがなかったとも言える。 そこでXDの登場だ。 従来の制作フローだと戦略から実装まで、PowerPointやExcel、IllustratorやPhotoshopなど多くのツールが使われていた。ただこのように資料数が多くなればなるほど、いくつものツールに触れなければならなくなって大変だ。 登壇者の経験談で「急な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
