デキるやつはクリックさせへん | ベイジの日報
ベイジの『7つの行動原則』には、「ホスピタリティ〜びっくりするくらい気を利かせる」ちゅう項目がある。 以前の行動指針にも「プロフェッショナルは気が利く」っていう項目があったけど、働く上での気配りや配慮を求めるカルチャーを大切にしたい、ちゅうこっちゃな。 せやけどこれ、曖昧で感覚的で抽象的な話といわれれば確かにそうや。せやから、こんな疑問を持つやつがおるかもしれん。 「気が利く」「気配り」「配慮」って具体的にどういう行動なん？ 気ぃ使ってるつもりやのに気ぃ利かんって言われてまう。どないしたらええねん 気ぃ配った行動が相手にどういう影響与えてるか把握してABテストして精度上げたいから定量的に教えろや 結局は精神論やろ？ でもな、なんでもかんでも定量的にすりゃええもんちゃう思うとる。特に組織の多岐に渡ることは、抽象的な方向性だけ示して、細部は自分の頭で考えてもらう方がええ。その方が結果的に組織の
理由はいいから腕を磨け | ベイジの日報
以前勤めていた会社はデザイナーが遠隔地にいたため、クライアントと直接会わないことが多かった。そのためディレクターがクライアントに直接話を聴き、その内容を社内に持ち帰ってデザイナーに伝える、という制作工程が一般的だった。 デザイナーの中には、それでも器用にデザインができてしまう人と、そうでない人がいた。そして後者のデザイナーからは、こんな声がよく上がっていた。 前段のインプットが十分ではないので作りにくい クライアントと直接話ができないので作りにくい この時ディレクターをやっていた私は、この意見に一理あると思った。 そこで、前段の設計資料をサマリーせずにフルで共有したり、オリエンをより丁寧にしてみたり、クライアントとの打ち合わせに同席してもらう機会を設けるようにした。 結果どうなったかといえば、変わらなかった。なぜなら、デザインのクオリティが低かったのは、インプットやクライアントと直接会うか
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
Webサイト公開前にチェックすべき項目11選 | techlab / baigie
Webサイト公開前の最終チェック。ベイジでは「ブラウザチェック」と呼んでいます。サイトの規模によって1～4人日とかかる時間はまちまちで、たいてい複数人で分担してチェックすることが多いのですが、実装完了後に一通りチェックを行っています。 このチェックはどちらかというと「最低限これはできてないとダメ」という品質担保の観点から行うものです。ベイジではスプレッドシートにチェック項目をまとめて、案件ごとにシートを用意してチェックが完了したかを項目ごとにステータス管理しています。 この記事では特に重要な項目をピックアップして、どういった内容をチェックしているか解説します。チェック項目は「全体」「ページごと」というふうに二分していて、「全体」はサイトを全体検索かけて一括でチェックが終わるもの（VS Codeの全体検索や、DB内部であればWordPressの管理画面から検索かけたりしている）、「ページごと
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
ウェブ・ユーザビリティの簡単9原則 | knowledge / baigie
ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
デザイナーのための超具体的プレゼンテクニック | knowledge / baigie
プロジェクトやコンペにおいて、クライアントにデザインを提案する瞬間はいつだって緊張するものです。苦手意識を持っているデザイナーの方も多いのではないでしょうか。 本記事ではそんなデザイン提案における注意事項や、覚えておくとスムーズに進むノウハウや心構えについてまとめてみました。 構成としては、提案前日までの資料を作成したり練習したりといった「１.準備編」、当日実際にデザインを提案する「2. 実施編」、提案が終わった後の「3.事後編」といった具合に、時系列にそって要点を解説しています。 提案の機会が多いデザイナーや、それ以外の職能でもクライアントと対峙することの多い方には広く応用できる箇所もあるかと思いますので、是非参考にしてみてください。 1.準備編 1-1.資料作成 1-1-1.ページ番号 （ノンブル）を忘れない 資料にページ番号（ノンブル）がついていない場合、「〇ページをご覧ください」と
BtoBサイトを成功に導く180のチェックリスト | knowledge / baigie
このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ
知っておくと便利な思考フレームワーク×35 | knowledge / baigie
世の中には、経営やマーケティングのためのフレームワークや論理モデルが数多く存在しています。これらを学ぶことは、ビジネスパーソンとしての私の基礎力に繋がるのではないかと思い、特に著名なフレームワークを中心に、作られた背景や基本的な特徴を少し調べてみました。 3C マッキンゼー・アンド・カンパニー在籍時代の大前研一氏が1982年に発表した著書『The Mind of the Strategist』の中で提唱したフレームワークです。環境分析の手法のひとつといえるもので、外部分析と内部分析を簡潔に組み合わせて、市場機会を発見することを目的としています。 1980年代、トヨタ、SONYなど日本の製造業が世界市場で高い競争力を持っていました。しかし、成功している企業には必ずしも優秀な戦略コンサルタントがいた訳ではなく、洞察力と直感力による戦略立案がなされていました。 経営やマーケティングに関する「天賦
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
SaaSがUIデザインに力を入れるメリット | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジでデザインコンサルタントをしている古長です。 ベイジには2019年11年に入社し、SaaS/業務システムのUXリサーチやUI改善提案などの仕事をしています。『knowledge / baigie』では、SaaSや業務システムのUX/UIデザインの勘どころ等を発信していく予定です。 今回はSaaSにおけるUIデザインの重要性についてお話します。 SaaSは急成長している市場の１つですが、急成長の裏には様々な課題が潜んでいるものです。その課題の一つがUIデザイン、というサービスも多いでしょう。 事業の成長スピードに追い付けず、デザイン上の課題を抱えたまま走っているサービス、直感的に魅力を感じにくいUIデザインによって、マーケティング的に苦戦しているようなサービスは、確かに多く見られます。 こういったデザイン上の課題を抱える背景としては、以下のような事柄が考えられます。 優秀なデザイナーを
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
デザイナーにとって「作る」と同じくらい大切なこととは？ | ベイジの日報
会社によって仕事のスケジュール感はまちまちだ。3～4ヵ月ごとにプロジェクトが変わるような環境もあれば、1週間単位でコロコロと変わる環境もある。そんな環境の違いがデザイナーに与える影響は、とても大きいように思う。 私は20代の頃、代理店からの案件を多く請け負う会社にいたことがあるが、タイトなスケジュールで尚且つ納品日の後ろ倒しを相談する余地もなく、とても苦労した経験がある。それと比べてベイジは3～4ヵ月、もしくはもっと長くかかるプロジェクトもあり、しかも直クライアント。スケジュールも相談しやすい関係性で成り立っている仕事が多いため、とても働きやすい。 こうした環境は非常にありがたいものの、逆に新たにゼロからデザインを作る機会も少なくなっている、とも言える。レイアウトも配色もビジュアルの方向性も何も決まっていないところから、デザインの方針・システムを考えていく作業。面白さもあるが、このあたりを
入社2年目で身につけたwebデザインの5つの習慣 | ベイジの日報
ベイジに入社して、もうすぐで2年目が終わる。案件を重ねていく中で、トップページのデザインを作るときに、多くの失敗と学びがあった。その経験から、習慣化したことがいくつかあるので、まとめてみようと思う。 1. ラフを書いてから手を動かす ベイジでは、デザイナーがwebサイトの各画面のワイヤーフレームを作成する。その際、ディレクターと認識を合わせるため、手書きのラフを書くことがある。 以前は、いきなりデザインを起こしていたのだが、1ページ作り終えた際に「全体のバランスが悪い、レイアウトが単調でメリハリがない」と指摘されることがあった。そこで、ワイヤーフレームを作成するときと同じように、デザイン着手前もラフを書くようにした。 すると、事前に全体像を俯瞰して見ることができるので、セクション間のバランスやレイアウトを確認できる。このときに違和感があると、絵に起こしても上手くまとまらないことが多い。慣れ
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
