生成AIの進化でウェブ制作会社が消える可能性があるという話 | knowledge / baigie
2023年、生成AIへの注目度が一気に上がったとき、「AIに人間の仕事が奪われるのでは？」という議論がウェブ制作界隈でも巻き起こった。 その後、「AIは仕事を楽にしてくれるもの」「AIは人間の仕事を奪わない」という考えが主流となり、一旦は落ち着いているように思う。 あくまでSNSで観測している範囲だが、ウェブ制作界隈は生成AIに対する発信が少なく、他分野と比べてあまり強い関心を持っていないようにも見える。特にデザイナーの関心が低く、当社内でもエンジニアとライターは積極的に生成AIを使っている一方で、デザイナーの生成AI活用は緩やかである。 それだけデザイナーの業務は複雑性が高く今の生成AIでは対処しにくい、ということでもあるのだろう。また、デザイナーの職業選択動機やこれまで培ってきた努力を根こそぎ否定しかねない存在だから真剣に向き合いたくないという緩やかな抵抗感、意外と保守的で価値観や手法
選択式フォームをより使いやすくするポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
ラジオボタン、チェックボックス、ドロップダウンリスト、コンボボックスなどは、ユーザーの入力負荷を軽減させるために使用される選択型のUI要素です。これらは見た目や機能が似通っていることもあり、なんとなく使い分けている場合も多いのではないでしょうか。 しかしながら、状況と目的にあったUIを採用しなければ、入力負荷の軽減どころか逆にユーザビリティが低下し、入力エラーの原因になってしまうことさえあります。 選択式フォームを正しく設定すれば、ユーザーの入力の手間を省き、タイプミスから生じるエラーの防止が可能になります。選択肢がリストに格納されるタイプのUIは画面スペースの節約になり、よりシンプルで情報負荷の少ないレイアウトを可能にします。 業務システムのUIをより良くするためには、選択式フォームそれぞれの特性を理解し、状況に応じて適切にデザインしていきましょう。 選択式フォームの種類 ラジオボタン
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つの分野についてしっかり議論しよう、そうすることで成功確率を高めることがで
入力フォームにおけるエラーデザイン | ベイジのUIラボ
ウェブアプリケーションの使い勝手を向上させる上で、入力フォームの操作がスムーズかどうかは、非常に重要なポイントです。 スムーズに入力できないフォームは、ユーザーにたくさんのストレスを与える可能性があります。その中でも、特にストレスとなりやすいのが入力エラーです。 「入力を終えて登録ボタンを押した直後、エラーメッセージが表示されてイライラした」こんな経験は、誰しもあるでしょう。見方を変えれば、入力エラーを制すれば入力フォームの使い勝手を制することができる、といっても過言ではありません。 そもそも、エラーはユーザーに起こさせない仕組みであるのが理想です。つまり、エラーが発生しないUIに工夫したり、エラーを自動的に修正する機能を実装したり、といったことです。 しかし、UIの工夫だけでエラーを完全に回避することは難しいですし、自動化するにも現在のウェブの技術ではまだまだ限界があります。エラーが発生
WordPressの管理画面を使いやすくする簡単カスタマイズ18選 | knowledge / baigie
WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres
コーディングを助けるためにデザイナーができること② | knowledge / baigie
1. クリッカブルエリアの指定 ウェブサイトには、テキストリンクやボタン、フォームなど、ユーザーが操作できるインタラクションが存在します。多くの場合は、要素の外郭がクリック/タップできる領域（クリッカブルエリア）となりますが、デザインによっては、あえて要素の外郭＝クリッカブル領域としないことで、使い勝手が向上することがあります。 しかし、デザインデータにクリッカブルエリアの指定がないと、コーダーはそれを読み解くことができず、デザイナーが意図したクリッカブルエリアにならないことがあります。 そのため、以下のようにデザインデータを作り、どこまでがクリッカブルエリアになるか、明確に伝えるようにしましょう。 例：メニュータイトル 下記のようなケースの場合、デザイナー側からの指定がないと、Aのテキストリンクだけがクリッカブルとしてコーディングされてしまいがちです。しかし、Bのように写真エリアや説明文
ウェブ・ユーザビリティの簡単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を調整
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
仕事のストレスを軽減させる8つの思考 | knowledge / baigie
最近、「ストレスとどう付き合うべきか」ということをよく考えるようになり、メンタルヘルス、マインドフルネス、ストレスマネジメント、認知行動療法、ウェルビーイングなどの書籍を読み漁っています。 こうしたインプットを踏まえた上で、「仕事のストレスを軽減させる8つの思考」というのを私なりに考えてみました。元々は社内向けに作ったものですが、ストレスマネジメントは多くの働く人に共通する課題だと思いますので、皆さんにも共有します。 (1) 起こったことに、負の感情を加えない起こってしまったことについて、悪い、嫌だ、頭にくる、がっかりだ、大変だ、失敗だ、期待外れだ、といった負の感情を抱くことは、巻き戻せない時間を相手に、心をすり減らすだけです。結果論でしかないことに囚われず、起こった事実をありのまま受け入れ、余計な負の感情に飲み込まれずに、今やるべきことに集中しましょう。 ストレスが多い考え方：「納期間際
提案書の書き方、徹底解説～提案書のストーリー・コピー・デザインの基本法則【スライド付】 | knowledge / baigie
PowerPoint歴23年、デザイナー歴20年、経営者として10年以上に渡って自社のマーケティングやセールスに深く関わり、提案書を作ったコンペでの勝率91%を誇る私の知見を余すことなく注ぎ込んだ、『最強の提案書を作る方法～伝わるストーリー・コピー・デザインの法則』というスライドを公開しました。 便宜上「提案書」としていますが、企画書、営業資料、ホワイトペーパー、社内文書など、人を動かすために作られるすべてのビジネス文書に応用できるはずです。 提案書のストーリー、コピー、デザインに関する、実践的かつ具体的なノウハウを詰め込んでいます。デザインについては、プロのデザイナーではなく一般のビジネスパーソンを対象とし、仕事の中で本当に必要な知識だけをまとめています。 約170ページある本スライドは、私が企業向けにこれまで20回以上行ってきた有料講座の配布資料を元に、公開用に仕上げたものです。スライ
採用サイトのための撮影術～社員や職場の魅力を引き出す写真を撮るために | knowledge / baigie
デザイナーの池田です。 ベイジといえばBtoBサイトの印象があるかもしれませんが、実は採用サイトも多く手掛けています。 採用サイトの案件では、ほぼ確実に撮影が発生します。そのため、担当するデザイナーは、撮影にも立ち会い、ディレクションする必要が出てきます。 撮影といっても、何を撮るかによって撮り方も進め方も変わりますが、採用サイトを含む採用目的の撮影となると、以下の条件が前提になってきます。 モデルは社員（プロのモデルではない） モデルは通常、仕事の合間に撮影に参加 日常的な服装やメイク オフィスなどの職場が撮影場所 非日常的な演出より日常の再現 求職者に職場のリアルな雰囲気を伝えるのが一番の目的になるため、日常の自然な風景をカメラに収める必要があるのと、モデルが一般の会社員になるため、スムーズかつ短時間で撮影が済むようにナビゲートしなければなりません。 本記事は、私たちが採用サイトの撮影
良い上司の条件・悪い上司の条件 | knowledge / baigie
「一緒に働くならどんな上司がいいですか？」と聞かれれば、具体的な要望の一つや二つはすぐ出てくるでしょう。しかし、「あなたはどんな上司になるつもりですか？」と聞かれたら、漠然としたイメージでしか答えられない人の方が多いのではないでしょうか。 これは、部下の立場から「上司にこうあってほしい」と願うことより、上司の立場として「自分はこうなろう」とイメージすることの方が遥かに難しいことを物語っています。 少ない例外を除けば、社会に出た人のほとんどがまずは誰かの部下になります。その会社に居続けて、やがて力が認められれば、誰かの上司になります。 上司も部下も、ほとんどの人が通る道です。だから、上司と部下にちなんだ書籍やブログ記事は数多く存在します。なぜなら誰もが自分事化しやすいテーマだからです。しかも未だに作られ続けています。なぜなら上司と部下の話には正解がないからです。正解がないから、話題が尽きませ
コーディングを助けるためにデザイナーができること① | knowledge / baigie
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
中途採用のためのサイト戦略と13の成功条件 | knowledge / baigie
私たちは、BtoBサイトを得意とするweb制作会社ですが、実は採用サイトの実績も豊富です。BtoBの顧客化プロセスと採用プロセスには共通点があり、BtoBサイトの検討プロセスを転用し、戦略的な採用サイトの制作も行っています。 このように採用サイトの実績を積み重ねる中で、業界・業種・職種に関わらず共通する傾向も見えてきました。共通のパターンを知ると、世の採用サイトの間違いにも気が付くようになりました。 この記事では特に中途採用にフォーカスし、調査フェーズで私たちが行っているアンケートの集計結果なども交えながら、成功する中途採用と採用サイトの条件をまとめました。 条件1：自社の採用サイトをしっかり作る「自社で採用サイトを持つ必要ってあるの？」という声が出ることは、おかしなことではありません。 今は転職サイトも充実していますし、優秀な転職エージェントも数多く存在します。どこかに求人情報をアップし
簡単にできるWordPressのセキュリティ対策×12 | knowledge / baigie
ベイジでエンジニアをしている野村です。 ベイジには2012年の新年ともに入社し、WordPressやMovable TypeなどのCMSのカスタマイズなど、サーバーサイドの開発を中心に行っています。今後もそのあたりの情報を発信していきたいと思います。 今回は、WordPressについて。 WordPressはブログシステムというより、もはやCMSといっていいでしょう。インストールなどの設定も簡単、自由にカスタマイズできるプラグインやデザインテーマも豊富、何よりオープンソースで無償、ということで世界中で広く使われています。 このように数多くのメリットがあり、コストパフォーマンスが非常に高いWordPressですが、最近、セキュリティ上の問題を理由に、WordPressの使用を禁止している企業にしばしば出会います。 確かにWordPressは特別セキュアなCMSではありませんが、他の多くのCM
BtoBサイトのアクセス解析で最初に確認すべき8つのポイント | knowledge / baigie
SaaS市場の盛り上がりもあり、企業のマーケティング活動をサポートする便利なツールが続々と登場しています。マーケティングやセールスに従事する方々にとっても、複数のツールを使い分けながら仕事をすることは、当たり前のことになっているはずです。 そういったツールの中でも、Google Analyticsに代表されるアクセル解析ツールは、古くから使われている比較的ポピュラーな存在でしょう。 しかしながら、アクセス解析を専業としていない方にとっては、少々難しいツールであるようにも思います。クライアントの社内資料でも、全体の直帰率で良し悪しを判断していたり、ページビューをKPIにしていたりすることは珍しくありませんが、これはアクセス解析の正しい使い方や見方があまり浸透していないことを物語っています。 このようになってしまう一つの要因は、ツール上で閲覧できるデータの種類と量が膨大だからでしょう。 例えば
サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
個人目標達成のためのフレームワーク | ベイジの社長ブログ
当社では毎年1月、「目標シート」なるものの作成を各自行ってもらっています。前年度目標の達成率が年棒に大きく作用するということもありますが、それ以上に、個々人が仕事を通して意味のある成長をするために、毎年必ず設定・見直しをしておかなければならないものと考えています。 この目標シートは、私が勤めていたNTTデータの評価システム、知人の会社での人事評価の実態、自己啓発等の参考書籍、そしてもちろん私自身の経験を踏まえ、フォーマット化したものです。決して画期的なものではありませんが、目標の計画立案を大きく手助けしてくれるツールではないかと思いますので、ここで紹介させていただきます。 目標シートのフォーマット 目標設定シートのフォーマットは、以下のような構造になっています。エクセルのシートもこちらからダウンロードいただけます。（中身は適当に入れた記入例です） ご覧いただくと分かると思いますが、次年度の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
