service-tag コラム|トライベック
HUMAN INSIGHT CX
リサーチソリューション
コンサルティング
クリエイティブ・UX
制作・オペレーション
テクノロジー
データドリブン
マーケティング
サービスについて
オピニオン
トライベック広報
会社概要
社長メッセージ
経営理念
社名・ロゴの由来
トライベック・ニューノーマル
役員紹介
地図・アクセス

COLUMN

コラム

トライベック社員が多様なテーマで情報を発信するコラムです。また、社外からではなかなか見えにくい社内のさまざまなトピックもお届けします。

マーケティング
2020年10月19日

ウェブサイト価値ランキング2020最新版 コロナ禍におけるデジタルメディアの重要性と新たなCXの再考を

本日、当社のシンクタンク組織「ブランド戦略研究所」より、ウェブサイト価値ランキングの最新版がリリースされました。こちらは週刊ダイヤモンド最新号の第2特集でも大きく取り上げられていますので、すでにご覧になっている方も多いかと思います。本記事は、コラムの一部を除いて全面的に私の方で記事を書かせていただきました。コロナ禍のランキングということで、その結果に注目していましたが、予想通り大きな変化が見られましたので、ランキングの内容に先立ち一部こちらのコラムでも紹介させていただきます。 突然ですが、皆さんは2020年をどのような気持ちで迎えらえたでしょうか?東京オリンピック・パラリンピックを控えた日本は、過去最高のインバウンド客の増加によって、誰もが日本経済のさらなる飛躍することに期待していたことでしょう。しかし周知のとおり、現実は新型コロナウィルスの感染拡大によって一変しました。国民の未知のウィルスへの不安は、緊急事態宣言というこれまでにない行動の制限によって増幅され、行動様式を根本的に見直す契機となりました。当然のことながら企業と消費者のコミュニケーションの在り方も変わらざるを得ない状況となります。ある意味では、ゼロからコミュニケーションを構築しなければならないことになった企業も少なくありません。 “非対面・非接触” “巣ごもり消費” “在宅テレワーク”が飛び交う今の時代において、皮肉にもこれまで遅れていたDX(デジタルトランスフォーメーション)は一気に進むことになり、この数か月で“デジタル”自体がコミュニケーションの主役となったことは言うまでもありません。 企業は、直営店で接触型の手厚い接客が困難な状況になっている今、オンライン上の直営店とされるデジタルメディアに大きな期待を寄せることになります。だからこそ、今回のウェブサイト価値ランキングにはこれまで以上の意義があります。コロナ禍におけるランキングは、さまざまな変化が見られました。これまで上位を独占していた航空2社(ANA、JAL)ですが、コロナウィルスによる影響により売上価値が10%~20%超と大きく減少しています。その他の上位企業においても、その影響は少なくありません。一方でこうした状況にも関わらずデジタルメディアの価値を上げた企業もありました。その代表格が今回初のランキングトップ10入りしたイオンでしょう。同社の取り組みは“非対面・非接触”をキーワードにした新たなショッピングの形の追求(例えばドライブイン型の買い物)など、これまでにない新しいCXの形を再考し、新たなサービスに還元しているところも大幅にランクアップした要因のひとつと言えます。 さらに家具のニトリ、メガネのJINSや、スポーツメーカーのNIKEなどは、“在宅テレワーク”に直結する在宅環境への対応・整備、健康対策などにデジタルメディア(主にアプリ)を活用し、ユーザーとの関係維持と強化を重視すると同時に、新たな時代の需要喚起を自社のビジネスに繋げるための努力が伺えます。このようにユーザーを取り巻く環境に、さまざまな変化をもたらしたウィズコロナ時代において、企業と消費者のコミュニケーションの在り方を改めて見直し、新たなCXの形を再考することが求められています。 企業にとってユーザーとのコミュニケーションにデジタルメディアが欠かせないのはもちろんですが、その役割や活用の仕方はオンラインだけでなく、オフラインとの融合も含めて考えなければなりません。ユーザーニーズはそれだけ複雑化し、そして新たな生活様式へと適応しようとしているのです。 ウィズコロナ時代の今だからこそ、改めて自社のデジタルメディアを見つめ直してください。DXとは、新たなCXの上に成り立つものです。CX(ユーザー体験の最適化)なくして、DX(企業のデジタル活用)はありえません。現状の自社のポジションを正しく見つめ、さらに今の時代の求められるユーザーニーズを正しく把握するためにも、今回のウェブサイト価値ランキングは参考になるに違いありません。 【報告会動画のご案内】 https://brand.tribeck.jp/video_webinar/--> 関連リンク ランキング概要 ランキング一覧...

会社紹介・その他
2020年10月7日

-宣伝会議2020年11月号巻頭特集掲載- 「つなぐデジタル」で企業のブランドを進化させ、「ひとにやさしい」マーケティングで、ロイヤリティの最大化を支援してきた

私たちトライベックは今期20周年を迎えることになります。子会社の統合で新たなトライベックブランドとして船出しました。こうしたタイミングで今回、宣伝会議2020年11月号の巻頭特集「コロナ禍で見直す企業理念-ブランドの存在意義を再定義する-」でヤプリの庵原社長と対談する機会をいただきました。 新型コロナウィルスの拡大、デジタルの重要性再認識、変わる消費者の価値観。怒涛の勢いで変化し続ける時代において、経営者が考えることは何か。何を拠り所にこの不確実な時代を乗り越えるべきか。そんな思いを語らせていただきました。 私たちトライベックの理念である「ひとにやさしく、つなぐデジタルを」は、どんな時代においても普遍的なコンセプトであると考えています。企業として大事にしたい軸がどれだけ社員に浸透しているか。これが重要だということを改めて気づかされます。 そして、この対談を通じて私自身が一経営者として感じたことや大切なことを再認識したのでここに挙げておきます。 ・時代は変化する。テクノロジーは進化する。ひとの“心”は変わらない。 ・不確実な時代にこそ、普遍的な企業理念と社員に浸透させる努力を怠らない。 ・社長が主役ではない。主役は社員一人ひとりである。 ・ウィズコロナ時代に進むDX。人の気持ちに寄り添う中身のあるものに。 ・デジタルは魔法ではない。使いこなすためには“心”の理解が不可欠。 企業や協会などで講演をさせていただく機会が多いのですが、受講者の皆さんから最近多く受ける質問があります。 「これからの時代はどうなりますか?DXは大事だけどよくわからない…」 特に中小企業の経営者の中には、5年後やろうとしていたデジタルの波が一気に来たという感じで、一人歩きしているように思える「DX」という言葉に、漠然とした不安を抱えている方も多いのが事実です。 これからの時代はわかりません。それくらい不確実な時代です。ただしわかっているのは、デジタルが社会インフラとして欠かせないということです。そんな時代に大事なのは“ひと中心のサービス設計” “CX(顧客体験)設計”だと思います。誰のために、何のためデジタルを使い、結果として誰が、どれだけのメリットを享受するのかを考えることが大事です。デジタルは人の生活を豊かにするものであるということは間違いありませんが、道具に過ぎません。道具を使いこなすのは人であり、その人の気持ちに沿ったデジタル(道具)を使うことが真のDXと言えます。 時代の変わり目、不確実な時代だからこそ、改めて企業の本質、顧客の本質、デジタルの本質について見つめ直すことが求められているのではないでしょうか。 関連リンク 宣伝会議2020年11月号...

会社紹介・その他
2020年9月1日

ウィズコロナとなった激動の1年。逆風が吹き荒れる中、全員一丸となって苦難を乗り越え、新たな未来を描くべくNEXTステージへ

2020年9月1日。私たちの新たな一歩が始まります。20期という節目のスタートは、グループ3社(トライベック・ストラテジー、トライベック・ブランド戦略研究所、トライベック・プロフェッショナルサービス)統合により新たに生まれ変わった「トライベック株式会社」として歩むことを決めました。 また同時に2023年に向けた新中期経営計画を策定し、次の成長に向けたシナリオを全社で共有しました。気持ち新たに、そして大いなる希望に向かって、全社一丸となって取り組んでいきたいと思います。新たな中期経営計画「Welcome “Changes”」は、まさにコロナ禍にある世界全体が大きな変化の波にさらされる中で、これからの未来に欠かすことができない“デジタル”を主軸とした企業として、社会にあるべき姿を示し世界に影響力のある企業を目指す当社の志でもあります。 未知ウィルスとの闘いは長く、そしてウィズ/アフターコロナと呼ばれる社会においてこれまでの常識は通じないでしょう。生活様式のみならず、私たち生活者の価値観を大きく変えたこの流れは、経済活動を支える企業にとって新しい一歩を踏み出すチャンスだと考えています。 日本国内においてもデジタルシフトが叫ばれていた昨今ですが、それが加速度的に進んでいるとは言い難く、むしろ世界における日本のデジタル化は遅れていると言えます。そんな中で、待ったなしで変化を迫られている状況が突然やってきたわけです。しかしながら、それについていけない企業、とりわけ日本の99.7%を占める中小企業が大きく出遅れ、そして世界に置いていかれようとしているのです。日本における中小企業の沈没は、すなわち日本における経済の沈没を意味します。今この国の経済を支えているのは、一部の大企業ではなく、さまざまな技術や人、そして弛まない努力の結晶によって生まれた革新的なプロダクトやサービスの数々を生み続ける中小企業なのです。私たちトライベックは、そんな中小企業の一員として、そして日本という国の魅力を世界に届けるべく、改めて“デジタル”を武器に息を吹き返すための支援をしたいと考えています。 私たちは2001年に創業して以来、デジタルという専門性を武器に、企業のコミュニケーションの変化をいち早く捉え、そしてトランスフォーメーションしていくことに取り組んできました。今期20年目を迎えようとしている中で、改めて私たちが社会において果たすべき役割は何かを考えるきっかけとなっています。 新しい一歩を踏み出すために、この1年を振り返り、そして乗り越えてきたことを誇りに次の一歩につながる取り組みにチャレンジしていきたいと思います。 19期は苦難の連続。しかし諦めずに変化を前向きに受け止め前に進みました。 ・創業以来19期連続黒字で記録更新 ・HIRAMEKI XDが累積契約で300社を突破 ・トライベックの新しい働き方「トライベック・ニューノーマル」を施行 ・当社グループ実施の労働者アンケートで、働く満足度が7割超え 20期の新スローガンは「Welcome “Changes”」 【変化を受け入れ、変化を楽しむ、変化し続ける】 激動の時期だからこそ、私たちはその変化に真っ向から立ち向かい、そして新しい働き方を模索していきます。個人としても、会社としても大きな変化にチャレンジし、ワンチームとして社員も会社も成長し続けていくことを目指します。 新生トライベックは、新たな時代のビジョナリーカンパニーの先進企業として、そして世界に影響力のある企業として、社会に貢献できる100年企業を目指します。 ひとにやさしく、つなぐデジタルを デジタルで身近な「ストレス」を解消し、誰に対しても「やさしい」未来を創る。それが私たちトライベックの目指す世界です。 皆さまのビジネスを加速させるパートナーとして、いつでも相談できる頼れる存在として、さらには日本に、世界に驚きと感動を与えられる企業としての成長にご期待ください。 トライベック株式会社 代表取締役社長 .c-fl:first-letter{ font-size: 2.4em; font-family:sans-serif; font-weight:bold; } ...

マーケティング
2020年9月1日

コロナウィルスがもたらしたコミュニケーションの原点回帰。BtoBデジタルマーケティングに必要なデジタル×ココロとはなにか?

コロナウィルスが私たちにもたらしたものは何でしょうか。それは未知のウィルスという驚異だけではなく、これまでが当然だと思っていた日常や価値観を奪い去ったのです。しかしそれはすべてがマイナスだったのでしょうか。私は必ずしもそうは思いません。デジタルシフトが重要だと叫ばれていた近年において、日本はその取り組みが世界から後れをとっていたと言わざるを得ません。こうした中で、5年後、いや10年後と思っていたような未来が、コロナウィルスによって突然現実にもたらされたのです。非接触・非対面というキーワードは瞬く間に世の中に浸透し、それを実現させるためのデジタルは欠かすことのできないものと認識が広まりました。私たちは、これまでとは違い、はじめて企業のデジタルシフトを「ジブンゴト化」し始めたのです。 一方で急激なデジタル化がもたらす弊害にも目を向けなければなりません。それは人と人とのコミュニケーションが激減するという事実です。オンリーデジタルのコミュニケーションによって、「ココロ」が奪われ、本来人が持つ温かさがコミュニケーションに感じられなくなっていくことが懸念されます。 企業コミュニケーションにおいても同様で、過剰なデジタルシフトは、本来残すべき「温かみ」を感じるコミュニケーションとかけ離れてしまうことがあります。今一度、私たちは原点に戻ってあるべきコミュニケーションの姿を考え直す時期にあります。デジタル×ココロとは何か?BtoB企業のデジタルマーケティング成功のカギはここにあります。 関連リンク 変容する営業シナリオ リモートで欠けた情報を見直せデジタルマーケティングの明日 NIKKEI BtoB デジタルマーケティングアワード公式サイト...

プロダクション
2020年8月17日

とあるWebエンジニアの日々の情報収集と学習の方法について

はじめに この記事を書いた経緯ですが、コロナ渦の影響でリモートワーク対応がメインとなったことで通勤が無くなり、集中して学習する時間が増えたことがきっかけとなります。 普段の通勤電車の中でも情報収集や学習はできると思いますが、集中して行うことは容易ではないと思います。 集中できる時間が増えた今、自分が普段どの様に学習しているかという振り返りもかねて情報収集と学習の方法を書式化してみました。 個人的な意見もありますが、参考までに紹介させて頂きます。 IT・Web系のニュースサイトや個人のブログを回覧する 一番手軽に情報を収集できる手段ではないでしょうか。 ニュースサイトではトレンドランキング形式やカテゴリ毎に分類されていたりするので、総合的にIT・Web業界のトレンドをキャッチアップできます。 個人のブログではその技術に特化したコンテンツやニッチな情報もあるのが魅力だと思います。 またこれらのサイトにたどり着くには検索の仕方も関わってくるので、その時に必要な情報や、解決したい問題を明確にすることも大事です。 おすすめのWebサイト Qiita様々なプログラミングに関する知識・技術をユーザー同士が活発に共有しており、IT・Web業界のトレンドをキャッチアップするだけではなく、問題解決に繋がる記事も見つけることができると思います。 Twitterを活用する なにより情報の鮮度が高いと思います。 個人のエンジニアのアカウントをフォローするのもよし、コミュニティーのアカウントをフォローするのもよしですが、Twitterを見ていると思わず脱線してしまうような情報も沢山あるので業務中の閲覧はほどほどに。 おすすめのTwitterアカウント @jptechcrunch 日々のキャッチアップにおすすめ 主にIT系のスタートアップやWebに関するニュースを配信しているアメリカのブログメディア「TechCrunch」の日本版の公式アカウントです。 @webgl_shz Web上でこんな表現ができるの? と驚くWebGL(3次元コンピュータグラフィックス)に関連した情報が発信されてます。 YouTube動画を見る WebエンジニアYouTuberによる配信には、有料の動画学習サイトに匹敵する内容の動画も増えてきていると感じます。 動画と同じようにコードを書いたり、開発環境を整えたり「マネ」をする事が容易にできるのが動画学習の強みだと思います。 お気に入りのエンジニアを探してチャンネル登録をしてみてはいかがでしょうか。 おすすめのYouTubeチャンネル KENTA / 雑食系エンジニアTVIT・Web系の動向、エンジニアのキャリアについてフォーカスした動画配信が多いです。 技術書を読む インターネットと比べて情報の鮮度が出版されたときで止まってしまいますが、根源的な情報は活用ができると思います。 著者、出版社、言葉の言い回し...などもあるかと思いますが、まずは自分で試しに読んでみて「わかりやすい」と思った書籍を購入するのが良いでしょう。 ペーパーレスな時代ですが、個人的には書籍として実体があるほうが好きです。 おすすめの技術書 リーダブルコード 読みやすいコードを書くということに焦点をあてた書籍です。 読むと自分やチームメンバーが幸せになれるコンテンツが記述されてます。 コードを書く人は一読しておくと良いかもしれません。 アルゴリズムパズル-プログラマのための数学パズル入門 ただ単純にパズルを解くだけでなく、プログラムでどういうコードを書いたらパズルの問題を正解に導けるかというところまで考える必要があるので、コードを書くときの発想力を鍛えることができると思います。 さいごに 目まぐるしく変化するWeb技術を追うことは容易ではないですが、Webエンジニアの魅力のひとつとして「学ぶ楽しさ」だと思います。 普段の生活の中に無理のない範囲で情報収集や学習をする「くせ」を付けることが大事ですね。 また、体を動かす事も脳の活性化に繋がるので運動と学習を両立して日々のモチベーションを保ちたいと思います。 ...

広報・PR
2020年8月3日

私たちの新しい働き方「トライベック・ニューノーマル」

トライベックでは、「はたらく、にもっとバリューを」というコンセプトのもと、働き方改革を推進させる制度「.Style(ドットスタイル)」を全社で取り組んでいます。 テレワークは、今まで月4回までという基準が設けられていましたが、新型コロナウイルス感染拡大防止のため、3月下旬の都の外出自粛要請から全面在宅勤務となりました。その期間中に緊急事態宣言が発令され、解除されてからの働き方を全社で検討しておりました。その結果、6月から「トライベック・ニューノーマル」をスタートさせました。 嬉しい「ニューノーマル特別手当」 テレワークは今までもありましたが、上限を撤廃し月60%以上となることで、メインの働き方となりました。ちょっと高いけど美味しいコーヒーを調達したり、備品を購入したり、仕事がはかどる居心地のいい環境を作るのに試行錯誤しましたが、おかげで在宅ワークのスタイルができあがってきたのではないかと思います。 最近ハマっているのはナッツとドライフルーツ 在宅ライフで困っていることなどを各ユニットでヒアリングし、役員に課題をあげることで、会社より「ニューノーマル特別手当」が支給されることとなりました。これは環境設備費(ネットワークや暖房・冷房、備品購入、通信費など)として、月5,000円が全社員に支給されるというものです。ありがたいですね。 その他にも、オンライン飲み会(ランチや懇親会)についても、月一人1,000円まで補助してもらえることとなりました。ワンランク上の缶ビールとちょっと手が出せなかった珍味が買えてオンライン飲み会ができるというバンザイ在宅ライフです。 トライベックは、みんなが集まってワイワイ飲み会をするのが大好きな会社のため、オンライン上だけというのがかなり寂しいですが、当分の間イベントができないのは仕方がありません。 オフィスは「ソーシャルディスタンス」を意識 オフィス利用時は、入口で消毒、検温、マスク着用が義務づけられました。またデスクは「ソーシャルディスタンス」を意識した、前も左右も人のいないつくりにしました。席をひとつ飛ばして、ジグザグになるよう市松模様のような配置にし、席数も50%削減となりました。もちろん各テーブルには消毒液が設置してあります。 トライベックは決断が早い 3月下旬の都の外出自粛要請を受けてから全面在宅に入り、5月下旬の緊急事態宣言の解除、6月には新しい働き方制度がスタートしました。非常にスピーディな対応だったと思っています。トライベックはユニット制になり、小さなグループになったことでディスカッションも活発に行われるようになりました。またそれに応え、会社も決断が早いです。その時々にあわせた柔軟な変容がこれからは必要になってくるのかもしれませんね。 関連リンク 「トライベック・ニューノーマル」 ...

プロダクション
2020年7月6日

Nuxt.jsで選択式クイズアプリを作ってみた

経緯 トライベックでは定期的にLearning.Styleという業務研修を行っており、各部が他の部に向けて講義を行っています。 私が所属する部ではHTML,CSS,JSについての講義を行っているのですが、 ただ聞いてもらうだけでなくハンズオン形式で出来たら頭に入ってきやすい、 選択式クイズアプリをNuxt.jsを用いて作ってみました。 利用した技術 ■Nuxt.js vue.jsのフレームワークです。 ルーティングを管理行える「Vue-Router」や状態管理を簡単に行える「Vuex」といったパッケージが最初から入っているため、開発が楽に出来ます。 静的ファイルの作成も出来るので、今回は出力した静的ファイルを社内の共有サーバーに設置して、講義を受けている人に見てもらうようにしました。 製作時間 5時間くらい 完成品 作成した画面数は3つになります。 トップ画面 初めに表示される画面。問題集一覧をJSONから読み込み、画面に表示する。 問題集を選択し、【問題を解く】ボタンを押下すると、対象の問題集の情報を読み込み問題解答画面に遷移する。 問題解答画面 選択式の問題が出題される画面。答えだと思う選択肢を選び【解答】ボタンを押下。 誤ってボタンを押してしまったときのために前の問題に戻ることも可能。 設定ファイルをいじることで、問題や選択肢の順番をランダムにすることも可能。 全ての問題に解答すると解答結果画面に遷移する。 解答結果画面 各問題について答え合わせが出来る画面。 間違った場合は自分の選んだ項目が赤色で表示され、正解の項目が緑で表示される。 【終了】ボタン押下でトップ画面に遷移する。 ファイル構成 ・ ├── assets ├── components │ ├── questions │ │ └── qInfo.vue 問題のコンポーネント(問題文+選択肢) │ ├── questions.vue 問題解答画面のコンポーネント │ ├── result.vue 解答結果画面のコンポーネント │  └── top.vue トップ画面のコンポーネント ├── dlist ├── layouts │ └── default.vue ページのレイアウト ├── middleware ├── pages │ └── index.vue 本システムのメインページ ├── plugins │ └── commonFunc.vue 共通関数を定義 ├── static │ └── json │  ├── question_css.json cssに関する問題集 │  ├── question_html.json htmlに関する問題集 │  ├── question_js.json jsに関する問題集 │  ├── question_other.json CMSや通信に関する問題集 │  └── settings.json 本システムの設定ファイル └── store └── common.js コンポーネント間の値の受け渡しを行う ■assets 共通のCSS(SCSS)や画像ファイルなどを格納。 ■components コンポーネントファイルを格納。 ■layouts ページの外観を設定できる。共通ヘッダー・フッターを設定できる。 ■middleware ページが表示される前に実行したい処理などを定義する。 ■pages アプリケーションのビュー及びルーティングファイルを格納。 ■plugins インスタンス化する前に実行したい JavaScript プラグインを格納。 ■static ここに置かれたファイルは直接サーバのルートに配置される。JSONファイルは誰でも簡単に修正できるようにこのディレクトリ内に配置。 ■store vuexストアのファイルを格納 工夫した点 解答ページを作成することで、答え合わせを行えるようにした。何問正解したが分かるようになっており、正解の選択肢もハイライトにして分かりやすくしている。 JSON形式の設定ファイルを作成することで、ソースを修正しなくてもタイトルの修正や問題の差し替え、問題や選択肢のランダム機能のON,OFFを設定できるようにした。(※1) (※1)下記のようなJSONファイルを"static/json/"配下に設置 setting.json { "title": "web問題集", "btnName": "問題を解く", "questionPaths":[ { "filePath": "./json/question_html.json", "title": "HTMLの問題" }, { "filePath": "./json/question_css.json", "title": "CSSの問題" }, { "filePath": "./json/question_js.json", "title": "JSの問題" }, { "filePath": "./json/question_other.json", "title": "Webその他問題" } ], "randam": true, "choiceRandam": true } title→システムのタイトル btnName→トップページのボタン名 questionPaths.filePath→問題集のパス questionPaths.title→問題集のタイトル randam→問題のランダムのON(true),OFF(false) choiceRandam→選択肢のランダムのON(true),OFF(false) 問題ファイルのJSONは下記のようなフォーマットになっている。 下記はHTMLの問題集(static/json/question_html.json) { "questionList": [ { "no": 1, "question": "段落を指定するためのタグは次のうちどれか。", "choice": [ "p", "span", "pre", "div" ], "answer": "p" }, { "no": 2, "question": "リンクの出発点と到達点を指定するために使われるタグは次のうちどれか。", "choice": [ "p", "span", "a", "table" ], "answer": "a" }, ... ] } no→問題のインデックス question→問題の内容 choice→問題の選択肢 answer→問題の解答 新しい問題を作成したい時は、先に問題ファイルの作成し、設定ファイル(setting.json)にパスを記述してあげるだけよい。 改良案 ■問題JSONファイルのフォーマット変更 現状は選択した選択肢と"answer"の値の完全一致で成否を判定しているが、 選択肢にもIDを振り、answerにはそのIDを設定するように改良。 ■記述形式にも対応 現在は選択式の問題しか作成できないため記述式の問題も作れるように改良。 問題ファイルに問題形式のkeyを追加(選択式 or 記述式)。 さいごに 今回は作ったシステムの大まかな概要を説明しましたが、次のコラムでは本システムのソースコードを交えながら各コンポーネントの説明が出来ればと思います。 ...

プロダクション
2020年6月22日

classのシンプルなグリッドシステム

今やWebページのレイアウトメソッドとしてすっかり定着したグリッドデザイン。近年では、flex-boxやCSS gridの登場でますます使い勝手が良くなっていますね。一方で、マルチカラムレイアウトのためだけにBootstrapなどの大がかりなフレームワークを導入したり、複雑なCSSを書き起こしたりするのはちょっとめんどう。 12カラムグリッドシステムのイメージ そこで今回は、簡単なclassだけで手軽に3パート・レスポンシブのマルチカラムレイアウトを実現するシンプルなグリッドシステムを作ってみます。 いつも悩ましい多重class 広く利用されているコンポーネントフレームワークBootstrapにも、一般的な12分割タイプのグリッドシステムが搭載されています。たとえば「スマホは2カラム、タブレットは3カラム、PCは4カラムで」といったレイアウトをする場合、下のようにclassを記述します。 <div class="row"> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> </div> Bootstrapのグリッドシステムは「12を分母とする分数の分子」で列幅を指定するのが特徴で、指定方法こそ慣れれば問題ないものの、classがいくつも並ぶのはもう少しすっきりさせたい気がします。また、12分数で表現できない5カラムや8カラムといった列数が実現できないのも少し物足りないですね。 1クラスで書けたら簡単だけど…… シンプルにひとつのclassだけでメディア別に異なるカラム数を設定したい。たとえば上記の「スマホは2カラム、タブレットは3カラム、PCは4カラム」というレイアウトならば、 <div class="row"> <div class="col2-3-4"></div> <div class="col2-3-4"></div> <div class="col2-3-4"></div> <div class="col2-3-4"></div> </div> こんな風に1クラスで書けたら、直感的だし楽チンでよいのではないでしょうか(ハイフンで区切られた3つの数字には1~12の何を入れてもよい)。ついでに5カラム、7カラム、8カラムといった、12分割ルールでは割り切れなかった段組みにも対応できたらもっとすてきです。 パターンは5,184通り ですが、1クラスであらゆるレイアウトパターンを網羅しようとすると、 12×12×12×3=5184 OMG、5,184通りものスタイルを定義しなければいけません。 .col1-1-1 { width: 100%;} .col2-1-1 { width: 50%;} .col3-1-1 { width: 33.3333%;} : : .col12-12-10 { width: calc( 100% / 10 );} .col12-12-11 { width: calc( 100% / 11 );} .col12-12-12 { width: calc( 100% / 12 );} 5,184通りを列挙することじたいはExcelなどを使えばたやすいですが、このシステムだけのために5000行以上あるCSSをページに読み込ませるのは人道にもとる行為とのそしりをまぬがれません。もっと合理的な方法を考えましょう。 属性セレクタを使う 属性セレクタには、属性名、属性値の完全一致、前方一致、後方一致、部分一致など多様なマッチングオプションがあります。これをうまく活用すれば5,184種類のスタイルを賢く合理化できそうです。 ハイフンで区切られた3つの数字のうち、最初の数字は前方一致、真ん中の数字は部分一致、最後の数字は後方一致でマッチングさせます。 /* 前方一致・スマホ用 */ [class^="col1-"] { width: 100%;} [class^="col2-"] { width: 50%;} : : /* 部分一致・タブレット用 */ [class*="-1-"] { width: 100%;} [class*="-2-"] { width: 50%;} : : /* 後方一致・PC用 */ [class$="-1"] { width: 100%;} [class$="-2"] { width: 50%;} : : これなら、それぞれのメディアクエリについて12種類ずつ、計36パターンのスタイルを定義するだけで5,184通りのレイアウトに対応できます。 できました! デモページ CSS .row { display: flex; flex-wrap: wrap; } .row > * { flex-grow: 0; flex-shrink: 0; } .row [class^="col1-"] { width: calc( 100% / 1 );} .row [class^="col2-"] { width: calc( 100% / 2 );} .row [class^="col3-"] { width: calc( 100% / 3 );} .row [class^="col4-"] { width: calc( 100% / 4 );} .row [class^="col5-"] { width: calc( 100% / 5 );} .row [class^="col6-"] { width: calc( 100% / 6 );} .row [class^="col7-"] { width: calc( 100% / 7 );} .row [class^="col8-"] { width: calc( 100% / 8 );} .row [class^="col9-"] { width: calc( 100% / 9 );} .row [class^="col10-"] { width: calc( 100% / 10 );} .row [class^="col11-"] { width: calc( 100% / 11 );} .row [class^="col12-"] { width: calc( 100% / 12 );} @media (min-width: 668px) { .row [class*="-1-"] { width: calc( 100% / 1 );} .row [class*="-2-"] { width: calc( 100% / 2 );} .row [class*="-3-"] { width: calc( 100% / 3 );} .row [class*="-4-"] { width: calc( 100% / 4 );} .row [class*="-5-"] { width: calc( 100% / 5 );} .row [class*="-6-"] { width: calc( 100% / 6 );} .row [class*="-7-"] { width: calc( 100% / 7 );} .row [class*="-8-"] { width: calc( 100% / 8 );} .row [class*="-9-"] { width: calc( 100% / 9 );} .row [class*="-10-"] { width: calc( 100% / 10 );} .row [class*="-11-"] { width: calc( 100% / 11 );} .row [class*="-12-"] { width: calc( 100% / 12 );} } @media (min-width: 1025px) { .row [class$="-1"] { width: calc( 100% / 1 );} .row [class$="-2"] { width: calc( 100% / 2 );} .row [class$="-3"] { width: calc( 100% / 3 );} .row [class$="-4"] { width: calc( 100% / 4 );} .row [class$="-5"] { width: calc( 100% / 5 );} .row [class$="-6"] { width: calc( 100% / 6 );} .row [class$="-7"] { width: calc( 100% / 7 );} .row [class$="-8"] { width: calc( 100% / 8 );} .row [class$="-9"] { width: calc( 100% / 9 );} .row [class$="-10"] { width: calc( 100% / 10 );} .row [class$="-11"] { width: calc( 100% / 11 );} .row [class$="-12"] { width: calc( 100% / 12 );} } Sass .row { display: flex; flex-wrap: wrap; > * { flex-grow: 0; flex-shrink: 0; } @for $i from 1 through 12 { [class^="col#{$i}-"] { width:calc( 100% / #{$i} ); } } @media ( min-width: 668px ) { @for $i from 1 through 12 { [class*="-#{$i}-"] { width:calc( 100% / #{$i} ); } } } @media ( min-width: 1025px ) { @for $i from 1 through 12 { [class$="-#{$i}"] { width:calc( 100% / #{$i} ); } } } } ...

プロダクション
2020年5月25日

faviconをアニメーションさせてみる

ブラウザのタブに表示されるfaviconが通知を教えてくれることがあります。赤いマークがついたりして、新着情報があることをfaviconがユーザにメンションしてくれます。なかなか気の利いた心遣いです。 通知が来るとリアルタイムでfaviconが変化し、通知に目を通すとその場で元に戻るので、表示するfaviconを動的に切り替えていることがわかります。 ということは、faviconを一定間隔で次々に切り替えていけばパラパラ漫画のようにアニメーションさせられるかも? ──という子供のような思いつきを実行に移してみます。 本当にfaviconを変更できるか? まずは、faviconを簡単に切り替えられるかどうか実験してみます。faviconを2枚用意して、ボタンを押すと切り替わるだけのjQueryを書きました。 <button><img src="./favicon-a.png"></button> <button><img src="./favicon-b.png"></button> $(function() { $('button').on('click', function() { $('link[rel="icon"]').attr('href', $(this).find('img').attr('src')); }); }); 結果は、 うまくいくようですね! どれくらいの速さで動くか? 次に、どのくらいの頻度でfaviconを切り替えられるか実験します。先ほど使った2枚のfaviconをsetIntervalで交互に切り替えるjQueryを書きました。フレームレート(秒間何枚の画像を切り替えられるか)をあれこれ変更して確認します。さてWebコンテンツのようにサクサク書き換わればよいのですが…… <link rel="icon" href="./favicon-a.png" data-alt="./favicon-b.png"> $(function() { const frameRate = 220; //フレームレート(ms) const $target = $('link[rel="icon"]'); window.setInterval(function() { const favIcon = $target.attr('href'); const altIcon = $target.attr('data-alt'); $target.attr({ 'href': altIcon, 'data-alt': favIcon }); }, frameRate); }); 結果は、 実験の結果、筆者の環境ではChromeで約4.5fps、Firefoxでは約9fpsと、想像以上に低いフレームレートでした(一般的な動画は約30fps)。これより切り替え頻度を上げるとコマ落ちします。あまりリッチな表現はできなそうです。 アニメーションを作る フレームレートの低いカクカクの動きしかしてくれないことがわかりましたので、アニメーションも割り切って地味なものにします。「ハートマークが拡大しながらフェードアウトしていく」という簡単な6フレームのアニメーションを用意しました。 最終フレームは通常時のアイコンにしてあります。アニメーション終了後、初期状態にリセットする手間をはぶくためです。 きっかけを与えると上の6フレームのアイコンが一周する、というjQueryを書きました。ハートマークのボタンを押すとアニメーションが走ります。 $(function() { const frameRate = 220; // フレームレート(ms) const frameAmount = 6; // フレーム数 let frameCount = 0; // 現在のフレーム let animationId; // setInterval用ID // [関数]アニメーション開始 function startAnimation() { animationId = window.setInterval(animateFavicon, frameRate); } // [関数]アニメーション処理本体 function animateFavicon() { if (frameCount < frameAmount) { const faviconPath = './frames/favicon_' + frameCount + '.png'; $('link[rel="icon"]').attr('href', faviconPath); frameCount++; } else { // 最後のフレームまで行ったら停止し、カウンターをリセット clearInterval(animationId); frameCount = 0; } } // クリックイベント $('button').on('click', function() { startAnimation(); }); }); 結果…… 地味……! でも、うまくいきました。低いフレームレートと狭い面積という制限はありますが、アイデアしだいでサイトに便利なインタラクションをつけ加えることができるのではないでしょうか。 なお、切り替えのたびにアイコン画像のリクエストがWebサーバに飛ぶことには注意が必要です。ループで回しっぱなしにしたり長大なアニメーションを組んだりするとサーバの負荷になるかもしれません。 ...

会社紹介・その他
2020年3月23日

男性初の育休を取得しました

コンサルタントの加藤です。管理職にあたる立場でもありましたが、第一子誕生に伴い、育児休業制度を利用して4か月間の休職期間を取得しました。トライベックでは、男性がこの育休を取得するのは初の事例となりました。 育休を取得したことで、 ●子育ての大変さと尊さを身に染み入るほどに痛感する ●妻と協力して子育てをしていくことでコミュニケーションがより活発になる などうまく言い表せないところもありますが、非常に良い人生経験を積むことができました。 また、取得期間が4か月間であることを知り合いなどに話すと、「4か月も取得ができてすごく良い会社ですね。」と言われることが多く、会社の懐の深さを感じられました。 育休中の体験は様々ありましたが、会社のコラムということもあり今回は、仕事面についてのメリットや復帰にあたっての苦労などを記載していきます。 業務の最適なアロケーション 私の主な業務としては、サイトリニューアルを中心に新規案件に対してWebコンサルタントとして関わっていくことです。ただ、クライアント側でサイトのすべてを運用しない場合などにおいては、リニューアルの流れでスポットとして対応依頼をいただくことも多くあります。その流れがいくつか溜まっていって、本来の注力分野である新規案件に携わる機会が少しずつなくなっている状態でもありました。 育休の機会にスポット対応が得意な方へ移管していく、また部門全体で業務の最適配置を見直す契機ともなり、各自がより適性に合った業務に付けるようになりました。 引継ぎによる担当案件の見える化 育休に向けては、取得予定の半年前から上長に相談をしはじめ、その後3か月前ほどから引継ぎ書類を合間時間で作成し始めていきました。引継ぎにあたっては、自分だけが知っていることや暗黙知の部分も、引き継いでもらうメンバーに同時に伝えていかないと十分ではありません。 案件全体概要として、経緯、商流、作業フロー、注意点など、自分の持っている知見や情報を資料に全て落とし込んでいくことで、スムーズな引継ぎができます。さらに、その中で、反省点や改善点が見つかったりすることもあるので、引継ぎ資料をただ作るだけ以上の効果がありました。 後輩の成長を実感 復帰して、これを感じられたのが一番よかったことでもあります。案件を後輩メンバーに引き受けてもらうこともあり、信頼はしていましたが少し不安な面も正直ありました。体制面での変更を行ったことも大きいと思いますが、後輩メンバーが想像以上に大きく成長していて、逞しくなっていました。毎日会っていると日々の成長を感じにくかっただけかもしれませんが、彼らの成長を感じて、復帰後の良い刺激になりました。 一方で苦労した点もありました。 仕事がうまく進んでいるかの心配 自身の性格上の特性もありますが、育児休暇を取得した直後は、引き継いだ仕事はうまくいっているか何か問題が起きていないか非常に心配になりました。はじめの2~3週間くらいは、隙を見つけてはメールを確認してしまっていました。そのことで妻に迷惑もかけてしまいました。日にちが経つにつれて問題もないことが分かり安心できたので、メール確認頻度も減っていきました。 仕事感覚の鈍化 当たり前ではありますが、復帰してから仕事に慣れるのには時間を要しました。仕事始めでは頭の回転スピードが驚くほどに遅くなっており、少し落ち込みました。 稟議や申請書といった社内業務のフローもすぐに忘れてしまうほうなので、徐々に慣れていくしかなかったですが、少し時間がかかった気がします。 終わりに 冒頭でも記載しましたが、男性で育休を取得したのは私が初の事例となります。この制度を利用した良いケースとなって、後に続きやすい雰囲気を作っていくことが重要だと考えています。そのために私自身が仕事に邁進して、さらに活躍していく姿を示していきたいと思います。...

クリエイティブ
2020年3月16日

情熱をもって企業のフィロソフィを伝える、コーポレートフィルムというクリエイティブブランディング

共感を生みだす、コーポレートアイデンティティの伝え方 テクノロジーの発展・浸透により、企業のWebサイトを通したユーザーとのコミュニケーション、ブランドの浸透が課題となってきています。 また表現の多様化というイノベーションにより、新たな価値を生み出すことが多くのクリエイターにとっても求められる時代となりました。 今回制作事例として紹介する株式会社 文芸社様では、2020年2月のTOPページ改修に伴い、 企業理念・フィロソフィを伝える手段として、コーポレートフィルムというクリエイティブアウトプットを選択しました。 企業がブランドメッセージやイメージをうまく印象づけ、いかにしてエンドユーザーに優れた体験を提供できるのか、共感のデザインを探っていきます。 文芸社様には、本を出版したい人、出版業界に興味を持っている人をはじめ、あらゆるステークホルダーを対象とし、「文芸社」という企業が世の中に与える役割、フィロソフィを外部にしっかり打ち出したいという想いがありました。 そこで、ご担当の方と打ち合わせを重ね、文芸社様にとって企業フィロソフィとは何か、どう表現するかを検討していく中で「働く従業員たちがほのかに醸す個々の矜恃こそがそれに値するのでは」という考えのもと、その表情・仕事風景を見せることは、100の言葉で「わたしたちは――」と語るよりも、 強く、鮮明に「文芸社」というものが何であるのかを、伝えられるのではないかというアウトプットに至りました。 そこで当初検討していた写真のスライドビジュアルによるストーリー展開よりも、映像表現の方がより伝えたいメッセージを届けられるのではという熱い旗印のもと、コーポレートフィルムの制作を行うことになりました。 映像表現という選択をすることで、メッセージ性を一段階上の次元に押し上げることが可能になり、主に下記の4つのメリットがあります。 ・ストーリー構成により、多くの伝えたいシーンを描くことができる。 ・映画のようなカット演出や音楽との相乗効果により、印象度を高めることができる。 ・躍動感、人々の息づかいなどのリアルさが親近感を生み、”自分ごと”化して感じられる。 ・その企業で働く従業員の一体感やモチベーションを醸成することができる。 今回のストーリー構成では、「本をつくる舞台を用意する人=文芸社」、「出版された本を手に取る人=エンドユーザー」とし、書籍の出版サポートなど制作過程から一冊の本の誕生を通して、人と人のつながりが形成されていく一連のシーンを描き、これまでは実際に出版体験をした著者にしか分からなかった体験を、映像を通して一般ユーザーにも伝えることで、出版体験を身近に感じてもらえるような構成にしています。 またキャスティングとして、役者やモデルを使わず、あえて本物の社員に出演してもらうことで、リアリティを演出する構成にし、何か新しいものが始まるような「兆し」を見せることで、インターナルモチベーションの向上にも一役買っています。 ディレクターズカット版 https://www.youtube.com/watch?v=HvzSP8HAkDE トライベック・プロフェッショナルサービス(株)「実績紹介」 https://ps.tribeck.jp/case/ 人のつながりで、クリエイションを生み出す メリットの多いように感じる映像の制作ですが、高いクリエイティビティを生み出すには、一般的なキービジュアルの撮影などに比べ、アイデアを形にする実行力と、より多くの人の協力が必要になります。 クリエイター含め製作側のスタッフだけではなく、クライアントのご担当者、出演者となる従業員まで、関わる人全員が、ONEチームとなって高い情熱を維持できることが鍵となります。 ストーリー構成、脚本、キャスト、演技、ロケーション、天候、撮影、ディレクション、編集、カラーグレーティングなど、チームで作り上げた一つ一つのピースを当て嵌めながら、最終的に一つの作品に仕上げる過程は、クライアントとの強い信頼も生み出しました。 すべてを社内のクリエイティブスタッフで創り上げた、トライベックとしては前例のないクリエイティブでしたが、新しいクリエイションをつくり物事を動かすのは、人の熱量と、好奇心や煌めきなのだと思うのです。...

社内イベント紹介
2020年2月27日

トライベック冬ツアー2020 in 越後湯沢

東京オリンピックを控えた2020年を迎え、気がつけばもう2ヶ月が経とうとしていますね・・・。東京でも雪が降るくらい寒い日があったり、春のように暖かい日があったりと気温が安定しない今日この頃ですが、私たちは2月7日(金)~8日(土)に、有志メンバー20名で越後湯沢に冬ツアーに行ってきました! この冬ツアーはトライベック恒例行事となっており、各々がスキー・スノボや温泉・ショッピング等、自由に楽しめるイベントとなっています。昨年までは軽井沢に行っていたのですが、今年は越後湯沢に行ってきました。 Maxとき339号で越後湯沢へ! 東京駅から新幹線で越後湯沢に向かいます。新幹線の中からもうツアーは始まっています。座席に座ったら、みんなで乾杯!座席はランダムになっていて、誰が隣になるかは当日までのお楽しみでした。お酒を片手に談笑しながら、到着を待ちます。 みんなワクワクしているので会話も弾みます 越後湯沢に到着!→ホテルで宴会 1時間余りで、新幹線は無事に越後湯沢に到着。ホームに降り立った瞬間・・・寒い!到着した頃にはもうすっかり夜だったこともあり、雪の残る越後湯沢は凍える寒さでした。シャトルバスに乗車し、宿泊先のホテルに向かいます。 今回お世話になったのは、「ホテル双葉」さん。合わせて28もの温泉と、新潟の食材を使った美味しいお料理を楽しむことができる和風旅館です。 各々部屋に荷物を置き、一息ついたらお待ちかねの宴会です。 なんだか昭和の社員旅行みたい・・・? 新潟の食材を使った会席料理をいただきました。美味しい料理とお酒に、会話も弾みます。 本物の氷の中にお刺身が・・・! 新鮮な野菜やお魚、新潟の日本酒・・・。どの料理も美味しくいただきました。 最後にみんなで集合写真。明日も楽しみですね! 28の温泉も楽しみました。 宴会でお腹も心も満たされた後は、旅館の温泉も楽しみました。様々な種類のお湯や露天風呂に癒され、明日に備えます。 こんなにたくさんの温泉が旅館の中に! 可愛い浴衣に、女性陣はみんなテンションが上がります 2日目。いよいよゲレンデに繰り出します! そして翌日。この日はスキー・スノボチームと温泉・ショッピングチームに分かれてそれぞれ越後湯沢を堪能しました。私は人生初ゲレンデ!スノボに初挑戦ということで、1週間前から楽しみと同時に緊張していました・・・。 いよいよ出発です! そしてゲレンデに到着。この日の天気は雪。時折風が吹くこともありましたが、新雪が積もり、ゲレンデのコンディションは抜群!ふわふわの雪を楽しむことができました。 いざ! みんなでゆっくり滑っていきます スキーチームと分かれ、スノボチームでまとまって滑っていきます。今回初挑戦のメンバーや初心者には、経験者が手取り足取り教えながら、みんなでゆっくりと滑っていきました。私も初挑戦ではありましたが、時には動けなくなっているところを助けてもらいながらも、皆さんの手助けのおかげでなんとか降りていくことができました。 後藤社長が見守ってくれました お昼休憩で一息 楽しさとついていく必死さとで、時間があっという間に過ぎていきます。一度昼食を食べながら休憩をとりました。スキーチームとも合流。こういうところで食べるご飯は本当に美味しい! スノボチーム スキーチーム 一方の温泉・ショッピングチームは・・・ その頃温泉・ショッピングチームは、チェックアウトの時間ギリギリまで旅館の温泉を満喫したり、街に出てショッピングやお食事、スイーツを楽しんだりしていたようです。各々がしたいことを自由に楽しめることが、この冬ツアーの魅力です! プリンを食べたそうです!美味しそう・・・! 最後に全員で! 場所は戻り、スキー・スノボチームは、昼食をとってエネルギーを蓄えたところで再びゲレンデに。今度はスキーチームもみんなで一緒に、より長いコースを滑っていきます。少し風も吹き、視界が悪くなることもありましたが、ここでもみんなでペースを合わせ、助け合いながら降りていきます。 視界は悪いけどみんな好調! スキーチームも楽しそう! 最後に記念撮影!みんな良い笑顔です。 スキー・スノボチームも温泉・ショッピングチームもそれぞれ1日満喫したところで、旅館に戻って合流し、帰路につきます。帰りの新幹線に乗車前にも、各々駅でお土産を買ったりお酒を飲んだりと、最後まで越後湯沢を堪能できた1泊2日の旅となりました。新幹線の中でお互いの思い出話をしたのもまた一興でした。来年の冬はどんな旅になるのか、今から楽しみですね! ...

UI・UX
2020年1月29日

カスタマーエクスペリエンス視点で見るユーザビリティの重要性

5Gによって進化するカスタマーエクスペリエンス 2020年は日本において次世代通信規格5Gの商用化がスタートする「5G元年」です。高速かつ大容量な通信により、あらゆるモノがネットワークでつながることで、今まで取得できなかったようなデータが簡単に蓄積できるようになり、革新的なサービスが生まれることが期待されています。 また、そのような時代においては、オンラインとオフラインの垣根は消失し、全てがデジタルに内包されるOMO(Online Merges with Offline)という考え方を前提に、マーケティング戦略を考える必要があります。 店舗や営業担当者など対面でのコミュニケーションにおいても、デジタルプラットフォーム上にある顧客接点のひとつとして位置付け、統合的にコミュニケーションを管理・分析することが重要です。 最初の“おもてなしの場”として重要視すべきオウンドメディア カスタマーエクスペリエンスを考える上で、顧客体験を可視化するカスタマージャーニーは欠かせません。 オウンドメディアは、購入前・購入時・購入後全てのフェーズにおいて重要な顧客接点となりますが、特に注目すべきは購入前におけるオウンドメディアの役割です。 興味があることや分からないことがあった時にインターネットで「調べる」ことは、もはや当たり前の行動となりました。また、企業に関する情報源として、以前は、テレビや新聞などのマスメディアが信頼されるメディアの上位を占めていましたが、「企業のWebサイト」が最も信頼されるメディアとなっています。(※トライベック・ブランド戦略研究所調べ) つまり、オウンドメディアは最初に顧客と深いコミュニケーションを図る重要な顧客接点なのです。そこで、ユーザーの理解や共感を得ることができれば、お問い合わせや資料請求などのアクションにつながりますが、逆にユーザーにとって不満の残るWebサイトとなっていた場合は、ビジネス機会の損失やブランドの棄損につながる恐れがあります。 デジタルメディア上での顧客の不満は目に見えづらいため、気付かぬうちに顧客が離れてしまった、ということにもつながりかねないのです。 ユーザビリティからはじめるCX改善アプローチ カスタマーエクスペリエンス向上の第一歩としてオウンドメディアのユーザビリティ改善に取り組む際に、押さえておくべき5つの視点があります。 上記は、トライベック・ブランド戦略研究所の「ユーザビリティ診断」(5評価軸99評価項目を用いて、100点満点で評価・スコアリングするサービス)の評価軸であり、多面的にオウンドメディアを分析することに役立ちます。 ユーザビリティ診断のスコアリングレポートや改善提案なども提供をしていますので、是非、皆さまが運営するオウンドメディアの改善に活用いただければ幸いです。 関連リンク トライベック・ブランド戦略研究所 トライベック・ブランド戦略研究所「ユーザビリティ診断」...

お問い合わせ

Web戦略策定からサイト構築、オペレーションまで、最適なワンストップのソリューションを提供します。
お気軽にお問い合わせください。

関連コンテンツ