UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
オウンドメディアの成功法則を全6万字で徹底解説（戦略・記事・運用・認知のポイント） | knowledge / baigie
私たちの会社はこれまでに、6つのオウンドメディアを自社で立ち上げてきました。顧客のオウンドメディアに対しても、提案、分析、支援を行ったことが多数あり、契約を伴わない相談、関係者への取材、悩み相談、商談、情報交換というレベルでは、数え切れないほどのオウンドメディアに触れてきました。 このような経験から、オウンドメディアの成功パターンと失敗パターンを分類した上で、成功の可能性を高める仕組みや枠組みが作れないかと考えて編み出したのが、私たちが『STAAM』と命名するオウンドメディアに特化した独自メソッドです。 STAAMとは、Strategy（戦略）、Theme（主題）、Article（記事）、Awareness（認知）、Management（運営）の頭文字を取ったものです。オウンドメディアを見切り発車する前に、まずこの5つの分野についてしっかり議論しよう、そうすることで成功確率を高めることがで
BtoB企業はブランディングとどう向き合うべきか？ | knowledge / baigie
私たちはウェブ制作会社なので、ブランディングが主テーマの仕事をすることは多くはありません。しかしながら、ウェブサイトにとってブランドやブランディングは避けて通れない、日常的なテーマでもあります。 私たちのメインクライアントである中規模BtoB企業の多くは、製品力・サービス力・営業力・販促力などで事業を拡大させてきています。その一方でブランドが体系的に整理されている企業はどちらかというと少数派です。短期的な成果に繋がりにくく、長期的な投資が必要になるブランディングの優先度を下げることは、成長期を駆け上がっていくところまでの戦略としては正しいといえます。 しかし、事業がある程度の規模まで成長して成熟期に差し掛かり、市場での影響力が高まり、社会との接点が増え、関与者も多様になり、コミュニケーションの総量が増えていくと、明確なブランドの指針がないことによって、様々な問題が発生するようになります。
ベイジ流戦略的ウェブ制作メソッド
概要 情報発信を企業文化とする私たちは、ウェブ制作やマーケティングの知見をできる限り外部に発信してきました。しかし、ブログやSNSでは伝えられる量に限界があります。そこで2020年夏、日頃の情報発信だけでは不可能なボリュームの知見を、一気に大放出する場を設けました。それが全10回の『戦略的ウェブ制作集中講座』です。 約40社にご参加いただいたこの講座、終了後も口コミが広がり、再演の声を多くいただくようになりました。そこで今回、講座の様子をレコーディングした動画と講座内で使用したドキュメント一式を販売することにしました。 55万円（税込）と高額に思えるかもしれませんが、仕事でつかえる実践的な内容が盛り沢山です。提案やサービス改善に活かすことで、すぐに元が取れる内容になっています。自社の集客やマーケティングにも活かせるでしょう。また、社員教育や新入社員の研修教材にも最適です。動画と資料が、社内
採用人事で先を行くサイボウズが本気で採用サイトを作ったら？ 戦略と制作過程を解説 | knowledge / baigie
ベイジはこのたび、サイボウズ株式会社さんの採用サイトリニューアルを担当しました。 年を跨いで約8ヶ月を要する、ウェブサイトとしては比較的大規模なプロジェクトとなった本案件。公開後のサイトは会社説明会など採用現場でも活用されており、訪れた方に「なんかわかりやすいな」「企業のカラーが出てるな」と直感的に感じてもらえる点にもご満足いただいています。プロジェクトとしても、サイボウズさんの社内イベント「サイボウズオブザイヤー」で特別賞をいただくとても印象的なものになりました。 こうしてさまざまな場面で高く評価された採用サイトですが、よりよい形で実現できた理由はベイジの知見やスキルと、ほかの誰よりも「サイボウズ」について知っているサイボウズさんの力をうまく掛け合わせられたことにありました。 クリエイティブのクオリティを上げるヒントは、制作プロセスにこそ多く隠されているもの。そこで今回は、普段私たちの目
ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
2021年現在、ベイジの柱の事業はウェブ制作事業とウェブアプリデザイン事業です。ウェブ制作事業は会社設立の2010年からの主力事業で、サービス品質の平準化を目的に2014年頃からワークフローの整備を進めてきました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー2021年版」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 また今回ワークフローを整備するうえでは、クライアントごとの開
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
簡単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を調整
知っておくと便利な思考フレームワーク×35 | knowledge / baigie
世の中には、経営やマーケティングのためのフレームワークや論理モデルが数多く存在しています。これらを学ぶことは、ビジネスパーソンとしての私の基礎力に繋がるのではないかと思い、特に著名なフレームワークを中心に、作られた背景や基本的な特徴を少し調べてみました。 3C マッキンゼー・アンド・カンパニー在籍時代の大前研一氏が1982年に発表した著書『The Mind of the Strategist』の中で提唱したフレームワークです。環境分析の手法のひとつといえるもので、外部分析と内部分析を簡潔に組み合わせて、市場機会を発見することを目的としています。 1980年代、トヨタ、SONYなど日本の製造業が世界市場で高い競争力を持っていました。しかし、成功している企業には必ずしも優秀な戦略コンサルタントがいた訳ではなく、洞察力と直感力による戦略立案がなされていました。 経営やマーケティングに関する「天賦
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ファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
ランディングページのデザインに必要な7つの心がけ | ベイジの日報
これまで何度もランディングページ制作に携わる機会があったが、特に入社して1年ほどはうまくデザインをまとめることができず、苦しい思いをすることが多かった。 つまずいたことを思い返すと数え切れない。訴求ポイントをしっかり把握しないまま手を動かしていたこと、提供された原稿やワイヤーフレームをそのまま反映して発想に自由さがなかったこと、表現の引き出しが少なく全体的にワンパターンになることなどは、特に記憶している。 しかし2年の経験を重ねた今は自分なりに気をつけるポイントが見えてきた。そこに注意することで、魅力的で内容が伝わりやすいデザインに仕上げることができる。振り返りとして、私が心がけているポイントをまとめてみたい。 1. 細かい説明を読ませる前に見出しで結論を伝える 内容に興味を持ってもらうためには、まずタイトルに目を留めてもらわなければならない。提供された原稿に見出しが無い場合、必ず結論やユ
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
