はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ

ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません

色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー

約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム

世の中には、経営やマーケティングのためのフレームワークや論理モデルが数多く存在しています。これらを学ぶことは、ビジネスパーソンとしての私の基礎力に繋がるのではないかと思い、特に著名なフレームワークを中心に、作られた背景や基本的な特徴を少し調べてみました。 3C マッキンゼー・アンド・カンパニー在籍時代の大前研一氏が1982年に発表した著書『The Mind of the Strategist』の中で提唱したフレームワークです。環境分析の手法のひとつといえるもので、外部分析と内部分析を簡潔に組み合わせて、市場機会を発見することを目的としています。 1980年代、トヨタ、SONYなど日本の製造業が世界市場で高い競争力を持っていました。しかし、成功している企業には必ずしも優秀な戦略コンサルタントがいた訳ではなく、洞察力と直感力による戦略立案がなされていました。 経営やマーケティングに関する「天賦

「もっと話上手になれたらいいのに」と思っている人は多いのではないでしょうか。 普通のビジネスパーソンは、アナウンサーのような卓越した話術を身に付ける必要はありません。しかし、話上手になることができれば、交渉が得意になり、営業も人事評価も転職活動も有利に進められるようになります。仕事におけるメリットは計り知れません。 私たちの会社でも、特に顧客と直接対話する機会が多いディレクターやデザイナーには、業務知識だけではなく、顧客との話し方についてもなるべくフィードバックしています。会話のクオリティは、サービスの品質や満足度に深く関わると思うからです。 最近は、会話ではなく、メールやチャットで済む機会も増えています。一方で、話上手な人はテキスト・コミュニケーションも大抵上手な印象があります。話術の中には、コミュニケーションに共通する普遍的ななにかが含まれているのでしょう。 こんな記事を書いてはいます

謎の訪問チャネル2019年10月17日に公開した弊社の新しいオウンドメディア『knowledge / baigie』のアクセスログを見ていて、面白い現象を発見しました。 以下は、公開日である10月17日から翌月末（11月30日）までの、約1か月半の流入チャネルのレポートです。 ベイジを知る人には、TwitterやSNSに強いweb制作会社という印象をお持ちの方も多いかもしれません。事実このレポートを見ても、オウンドメディアの流入チャネル第一位はSocialとなっています。オウンドメディアを開設してすぐ、数多くのトラフィックを獲得できたのはSNSのおかげである、ということはここからもうかがえます。 一方、通常の企業サイトでは上位を占めることも多いOrganic Searchの割合は7%前後とかなり少ないです。これはインデックスされているページ数も少なく、検索エンジンからの評価がまだ高くないた

ベイジでエンジニアをしている野村です。 ベイジには2012年の新年ともに入社し、WordPressやMovable TypeなどのCMSのカスタマイズなど、サーバーサイドの開発を中心に行っています。今後もそのあたりの情報を発信していきたいと思います。 今回は、WordPressについて。 WordPressはブログシステムというより、もはやCMSといっていいでしょう。インストールなどの設定も簡単、自由にカスタマイズできるプラグインやデザインテーマも豊富、何よりオープンソースで無償、ということで世界中で広く使われています。 このように数多くのメリットがあり、コストパフォーマンスが非常に高いWordPressですが、最近、セキュリティ上の問題を理由に、WordPressの使用を禁止している企業にしばしば出会います。 確かにWordPressは特別セキュアなCMSではありませんが、他の多くのCM

2019年はコンテンツマーケティング関連のイベントでお話しする機会が何度かあり、その中でたくさんの質問をいただいたのですが、すべての質問にお答えすることができませんでした。 そこで改めてこの場を借り、質問に回答させていただこうと思います。私の経験則にもとづくものも多いですが、参考情報としてご覧いただければ幸いです。 目的・意義・戦略 Q1. オウンドメディアの重要性を経営層に理解してもらうにはどうすればいいですか？ いわゆるオウンドメディアについては、成果が出るまでに時間がかかることが多く、必ず成功すると事前に言い切れません。 そのため、経営者や事業責任者が、オウンドメディアの力をそもそも信じているということは、推進する上での重要なポイントになります。逆に、否定的な人を説得して始めるのはなかなか難しい施策ともいえます。 こういった前提があった上での回答ですが、オウンドメディアの目的を、一つ

メリット1：価値観の浸透実は私たちの日報は、ある経営上の課題を解決するために始まった取り組みでした。その課題とは、「行動指針の浸透」です。 ベイジの行動指針は、2012年4月に制定されました。私が入社する4年前になります。当時は創業2年目で、社員はまだ3人の状態でした。その行動指針がこちらです。 最初は、7つの大項目とそれぞれに8つの小項目、合計56項目が策定されました。その後1つの大項目が増え、現在は64項目の行動指針となっています。それ以外は一言一句、2012年の段階から変わっていません。（ちなみに2020年現在、「行動指針」でGoogleで検索すると3位に表示されます） 創業2年、社員がまだ3人の状態で、組織というより個人事業に近い状態です。そんな状態で56項目もの明確な行動指針を作成するというのは、先走り過ぎのように思えます。 しかし、起業後の早い段階で行動指針を作るのは、代表の枌

ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ

「一緒に働くならどんな上司がいいですか？」と聞かれれば、具体的な要望の一つや二つはすぐ出てくるでしょう。しかし、「あなたはどんな上司になるつもりですか？」と聞かれたら、漠然としたイメージでしか答えられない人の方が多いのではないでしょうか。 これは、部下の立場から「上司にこうあってほしい」と願うことより、上司の立場として「自分はこうなろう」とイメージすることの方が遥かに難しいことを物語っています。 少ない例外を除けば、社会に出た人のほとんどがまずは誰かの部下になります。その会社に居続けて、やがて力が認められれば、誰かの上司になります。 上司も部下も、ほとんどの人が通る道です。だから、上司と部下にちなんだ書籍やブログ記事は数多く存在します。なぜなら誰もが自分事化しやすいテーマだからです。しかも未だに作られ続けています。なぜなら上司と部下の話には正解がないからです。正解がないから、話題が尽きませ

ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ