UXだけでは足りない何か | ベイジのUIラボ
UXについて色々と考えることがあり、少し言葉にまとめてみた。何が正しいという話ではないが、率直に感じていることである。 意図されたBad UX 車を運転する人なら経験したことがあると思うが、「近づかないと識別できない信号」というのがある。 この手の信号は、近付くまで青なのか赤なのか判別できない。そのため信号の近くになるまで、このまま進むべきか、ブレーキを踏むべきか、とドキドキさせられる。 先日までペーパードライバーだった私は、当初、スムーズな運転を妨げてストレスを感じさせるこの信号を、液晶の表示角度などの計算を誤った設置ミスだと思っていた。 しかしこれは、複雑な交差点などでの交通事故を防ぐために意図的に仕掛けられたもののようである。 いちドライバーとしては、けっして心地よい体験ではない。しかし、社会全体にとっては良い方向に向かうようデザインされた信号といえる。 このような「意図的にユーザー
デザイナーはビジネスオンチになるな | ベイジの日報
「そもそも市場にいるデザイナーの数が少ないうえに、ビジネスサイドの期待に応えられるデザイナーとなると相当な希少種である」という話を、経営者や事業責任者の口から聞くことが多い。 私のフェルミ推定だが、様々なメディアの利用者数や購読者数などから推測すると、国内のIT系デザイナー（ウェブデザイナーやUIデザイナー）の母数は数万程度の可能性がある。国内のITエンジニアの数が120万人（出典）と言われており、これらの推測値を鵜呑みにすれば、デザイナーはエンジニアの10分の1も存在しないことになる。 その上で「自社のビジネスとフィットするデザイナー」という条件で絞り込んでいくと、当然その数は相当に少なくなる。「希少種」という表現もあながち誇張でないだろう。 ここでいう「ビジネスサイドの期待に応えられるデザイナー」というのは、 スピーディーにプロアクティブに行動できる 1つのスタイルに固執せず柔軟に対応
理由はいいから腕を磨け | ベイジの日報
以前勤めていた会社はデザイナーが遠隔地にいたため、クライアントと直接会わないことが多かった。そのためディレクターがクライアントに直接話を聴き、その内容を社内に持ち帰ってデザイナーに伝える、という制作工程が一般的だった。 デザイナーの中には、それでも器用にデザインができてしまう人と、そうでない人がいた。そして後者のデザイナーからは、こんな声がよく上がっていた。 前段のインプットが十分ではないので作りにくい クライアントと直接話ができないので作りにくい この時ディレクターをやっていた私は、この意見に一理あると思った。 そこで、前段の設計資料をサマリーせずにフルで共有したり、オリエンをより丁寧にしてみたり、クライアントとの打ち合わせに同席してもらう機会を設けるようにした。 結果どうなったかといえば、変わらなかった。なぜなら、デザインのクオリティが低かったのは、インプットやクライアントと直接会うか
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
すべての人が情報発信をすべき理由 | ベイジの日報
「ブログかSNSで何か発信すればいいのに」という話をすると「自分はまだそのレベルにないので…」という人がいる。その時は必ず「情報発信に必要なレベルとかないですよ」という話をする。こういう人には、情報発信はそれなりのレベルの人や経験豊富な人がするもの、という固定観念があるようだが、今はそんな時代ではない。 例えばAという分野について、10段階でレベル10の人がいるとする。この人が発信する情報は確かにAに関わる人すべてが参考にできるだろう。ではレベル5の人の情報はどうだろうか。レベル6以上の人には役立たないかも知れないが、レベル5未満の人には有益な情報になりえる。ではレベル2の人はどうだろうか。レベル3以上の人には役立たなくとも、レベル2になるまでの方法は教えられる。業界分布がレベル8以上が一握りで、レベル2未満が多くを占める構造なら、多くの人から喜ばれるだろう。 では、まったく経験がないレベ
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
誰でも良い文章が書ける！Webライティング11のルール（スライド） | ベイジの社長ブログ
Web制作者を悩ませる問題に、「Webを熟知したコピーライターがいない問題」があります。特にメディア型のWebサイトの場合、文章の質がコンテンツパワー、ひいてはWebサイトの集客力・訴求力そのものになってきます。しかし現状、プロジェクトメンバーにコピーライターが参加しないのは当たり前になっています。 また、もしコピーライターをプロジェクトに参加させたいと思っても、Web特有のユーザ行動や設計思想、SEOなどに精通し、Webに相応しい文章を作ってくれるコピーライターは、この市場にごくわずかしか存在しないのではないでしょうか。 このWebのコピー問題は、考える以上に深刻です。なぜなら、文章の良し悪しで、コンバージョン率もユーザの満足度もブランドイメージも、簡単に変わってしまうためです。そして、その問題に対する私たちの結論は「全員でコピーをチェックして校正しよう」ということです。 私自身は今まで
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
Web制作会社の採用担当として、応募者にお願いしたい4つのこと | ベイジの社長ブログ
先日、Find Jobに出稿したところ、2週間で40名を越える応募がありました。これが多いのか少ないのかは判断はできないのですが、うちのような知名度も低く小規模なWeb制作会社に短期間でこれだけの応募が来たことは、純粋にうれしいことです。 本来、すべての応募者とお会いしてお話を聴ければベストと思います。しかし、やはり時間の問題があり、書類段階でお会いする方を絞らなければなりません。また当然ながら、面接した方を全て採用する訳にもいかず、どうしてもそこから選んでいかなくてはなりません。 私たちは知識や技術をウリにしている会社なので、スキル面での選定基準は色々あります。しかし、残念ながら、スキルとか経験以前のところで、選定から漏れてしまうということも多々あります。採用活動を行っていると、ごく当たり前のこともやらない人が多いことに気付かされます。 ここでは、Web制作会社への就職／転職を希望されて
最近のWebデザイン界隈におけるフラットデザインブームってなんか間違ってませんか？ | ベイジの社長ブログ
iOS7の発表で、フラットデザインというものがより一層注目されているように思います。その前からも、私のFacebookのフィードやGunosyには、フラットデザイン関連の記事が、ほぼ毎日のように流れてきており、注目のほどがうかがえます。 ただ、このフラットデザインブームに強い違和感を覚えるのは私だけでしょうか。特にPCサイト向けのWebデザインにフラットデザインを取り入れよう、みたいな動きに関しては、何かが間違っているような気がするのです。その思いを整理するため、少しまとめてみました。 そもそもフラットデザインが成立する条件は？ 私が初めてフラットデザインという言葉を聞いたときに思い描いたのは、単にグラデーションや影といった立体表現を行わないデザイン、という程度のものでした。もちろん、フラットデザインとは端的にはそういうことなのだとは思いますが、デザインから立体の概念を消し去ることは、表層
Fireworks開発終了によって、デザイナーが取るべき3つの選択肢
Fireworksの開発終了がAdobeからアナウンスされました。このタイミングで来るとは思っていなかったのですが、開発終了になるということ自体は、それほど大きな驚きでもありませんでした。 実のところ、AdobeがMacromediaを買収した際に、機能的な重複が多いFireworksはPhotoshopに統合されなくなってしまうのでは？と思っていました。結果的にそうはならなかったですが、その後もCSシリーズとしてバージョンアップされるたびに、大きな機能変更もなく、むしろアプリケーションのベース部分を引きずったアップグレートが悪影響を及ぼしているところもあったため、今回の決断は、Adobeの製品ポートフォリオ戦略を考える上で妥当な選択ではないかな、とすぐに理解できました。 ただ、そういうAdobe側の思惑はさておき、我々制作者が気になるのは、Fireworksを愛用してきたユーザーはこの後
デザインでWeb制作会社を選んで大失敗！よくある失敗例×7 | ベイジの社長ブログ
やはり好景気の波がやってきているのでしょうか。企業のWebサイトへの投資が活発になっているようで、検索エンジンで上位表示されている弊社には、ほぼ毎日新規の仕事の依頼が舞い込んできます。 とはいうものの、弊社のように有名ではない会社は、コンペで選ばれることが多いです。コンペ自体は、Web制作会社を選定する方法として、理にかなったやり方だと思います。しかし、コンペの選定条件などを拝見して、あぁ、これはWeb制作会社選びに失敗する典型だなぁ、と思うこともよくあります。 特に、デザインカンプ（と見積書）だけでWeb制作会社を選ぼうとする企業は、要注意です。恒常的にWebを活用している企業ならともかく、Webをどう使っていいか分からない、Webにそんなに詳しくない、というような企業や担当者がこの選び方をすると、失敗率がかなりあがります。 実際、私たちへの依頼の中には、過去にコンペをしてWeb制作会社
HTMLコーダーのキャリアに存在する5つの問題点 | ベイジの社長ブログ
HTMLコーダーとは、企画や設計、デザインが、ユーザーインターフェースとして完成する直前を担う業務であり、成果物の品質の最終防衛ラインを守る仕事でもあります。HTMLコーダーの能力が、SEOの精度やユーザビリティ、更新性を左右し、Webサイトのパフォーマンスに影響を与えることも少なくありません。 このように、HTMLコーダーはWeb制作における重要な部分を担っているにも関わらず、Web業界の他の職種以上にキャリア面でのリスクが大きいように感じています。その中でも、特に私が強く感じる問題点を、5つにまとめてみました。 ※なおこの記事は、最後は弊社の求人ページへのリンクに繋がっています。 問題点１：分業化が進んでいて、次のステップに行きにくい 最近のWeb制作は分業化が進んでいます。HTMLコーダーも当然、HTMLコーディングに特化して日々の業務を過ごすことが多いと思います。しかし業務の性質上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
