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

COLUMN

コラム

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

会社紹介・その他
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点満点で評価・スコアリングするサービス)の評価軸であり、多面的にオウンドメディアを分析することに役立ちます。 ユーザビリティ診断のスコアリングレポートや改善提案なども提供をしていますので、是非、皆さまが運営するオウンドメディアの改善に活用いただければ幸いです。 関連リンク トライベック・ブランド戦略研究所 トライベック・ブランド戦略研究所「ユーザビリティ診断」...

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

2020年 社長年頭挨拶

新年あけましておめでとうございます。 旧年中は多大なるご尽力をいただき誠にありがとうございました。2019年8月期(18期)では、グループ史上過去最高の売上利益を更新し、オフィスの全面リニューアルや社員の増大、新卒採用の強化、ティール組織改編、働き方のさらなる改革など、さまざまなイノベーションに着手し、そして完遂することができました。これも一重に、日ごろより支えてくださったクライアントの皆様、そしてパートナーの皆様、株主の皆様、社員とそのご家族の皆様のお力添えのおかげでございます。トライベック・グループの代表として、心より感謝申し上げます。 令和2年。ついに2020年となりました。日本国内では東京オリンピック・パラリンピックで大いに盛り上がることでしょう。それに呼応するように国内経済環境も活気づく1年となると予想されます。こうした中で当社は19期目を迎えているわけですが、持続的成長のための中期経営計画Premium2020の3か年目で最終年度を迎えることになります。当グループにとって中期経営計画の達成は悲願であり、そして日頃よりお世話になっております皆様に対する責務と捉えています。だからこそ、2020年は全社が一丸となることはもちろんのこと、社員一人ひとりの成長加速が欠かせない1年となります。 ONE * ONE(ワンバイワン) この言葉は、社員一人ひとりがしっかりと成長を目指せるように、19期のスローガンとして掲げています。私たちトライベック・グループにおいてもっとも大切にしているのは「ひと」です。社員一人ひとりに個性があり、そして一人ひとりが弛まない努力ができる。そして何より、自分だけでなく、仲間のために頑張れる姿勢。そんな社員が誇りだと思っています。この社員一人ひとりの成長が、会社のさらなる成長につながると信じて疑いません。 Tribeck Premium~トライベックだからこその価値~ 私たちの中期経営計画はこの言葉から始まります。2020年、集大成を迎えるにあたり、中心事業となるデジタルマーケティング支援事業は「HUMAN INSIGHT CX」という独自のコンサルティングメソッドに基づいた、高度な品質のコンサルティングサービスを提供していきます。またマーケティングプラットフォーム事業では、「HIRAMEKI management®」を軸に、改めて「ひと基点のデータマネジメント」の在り方を追求し、大企業のみならず、中小企業のデータ活用をサポートしていきます。さらに、昨年11月に創立したCXコンソーシアムは、早くも業界全体で注目を集めており、2020年からその活動を本格化し、数々の分野におけるプロフェッショナルと共に、真のデジタルトランスフォーメーション(DX)の在り方を定義し、支援していきたいと思います。 最後になりますが、2020年の「子年」は繁栄を意味します。今年入社の新卒は10名を超え、さらなる人員強化に努めると共に、その育成についてもしっかりサポートして参ります。トライベック・グループはまだまだ進化します。繁栄の子年にさらなる飛躍をここに誓い、年頭のあいさつとさせていただきます。本年もどうぞよろしくお願いいたします。 トライベック・ストラテジー株式会社 株式会社トライベック・ブランド戦略研究所 トライベック・プロフェッショナルサービス株式会社 ...

社内イベント紹介
2019年12月23日

トライベック社員旅行2019 in 石垣島(2班)

気が付けばもう年末。今年一年を振り返ると本当にいろいろなことが起き、とても大変だった一方で充実した一年でした。来年はもっと、どん欲に様々なことにチャレンジしていき頑張りたいと思います・・・。と、一年を振り返る前に社員旅行の報告をしなければ! 11月下旬に社員旅行で石垣島に行ってきました。その中で私は11月23日(土)~11月25日(月)の日程で行く2班に参加したので、その様子をレポートしていきたいと思います! 1日目 羽田空港第2ターミナル(10:25集合→石垣島へ) 雨が降りしきる中、大幅に遅れる人も出ずに無事に2班32名全員集合!保安検査場をパスし、搭乗ゲートに向かうと、早速お酒を片手に楽しんでいるメンバーの姿も・・・。そしていよいよ石垣島へ出発!フライト時間は約3時間ですが、離陸してすぐに寝てしまったのであっという間に過ぎていました。 いざ石垣島へ! 石垣島到着!ホテルはまるで海外の高級リゾート施設 飛行機は無事、定刻通り石垣島に到着。飛行機を降り、まず初めに思ったのは『暑い』。 東京との気温差が15度以上あるということで、すぐさま上着を脱ぎTシャツ1枚になりました。空港到着後、全員いる事を確認し、すぐにホテルに向かいます。 今回お世話になったのは、空港から車で35分ほどの場所にある「フサキビーチリゾート ホテル&ヴィラズ」さん。高級感のあるエントランスを抜けるとコテージがいくつも広がり、プールやプライベートビーチもあり、楽しむことが出来ます。夜には浜辺に用意されているサマーベッドに寝転び、空いっぱいに広がる星空を満喫しました。 プライベートビーチにはお洒落な桟橋も! 石垣島について、まず向かったのは・・・。 懇親会まで時間はあるが、市街地まで行く時間はない・・・。ということで近くに何かないかと調べてみると、徒歩15分の場所にジェラート屋さんがあることが判明。暑くて冷たいものを欲していた我々には、ぴったりということで早速向かいました。 やってきたのは『ミルミル本舗-本店-』さん。 海を一望できる丘の上にある石垣島でも有名なお店です。早速ジェラートを注文しようとメニューボードを見ると「牛丼」の文字が。とてもお腹が空いていたため、本来の目的を忘れて、すぐさま牛丼を注文。景色、雰囲気、空腹、そして最高の味と完璧な状態で食べる牛丼は、これまで食べた牛丼の中で一番美味しかったです。(その後にジェラートも美味しくいただきました。) 石垣島について初めての食事が牛丼。 1班2班 合同懇親会 1日目の夜は、一足先に石垣島入りしていた1班のメンバーと懇親会を行いました。会場は八重山の郷土料理をいただける『舟蔵の里』さん。 八重山の料理は初めていただきましたが、初めての味や食感に大興奮!どの料理もおいしかったです。終盤には地元の方に三線と八重山舞踊を披露していただき、五感で石垣島を体験できるイベントでした! みんなで八重山舞踊に挑戦! 2日目 豪華な朝食。そしてSUPに挑戦 続いて2日目。この日は朝から晩まで自由行動で様々な場所を巡り、たくさん動くので、しっかりと朝ごはんを食べます。ホテルの朝食はビュッフェスタイルなのですが、その種類が非常に豊富!八重山そばやゆし豆腐などの郷土料理をはじめ、中華や洋食などその数は100品近くあるそうです。とても豪華な食事をいただくことができ、朝からテンションがあがってしまいました。 たくさん種類があって迷っちゃう 朝食を済ませたら川平湾へ。朝から雲が広がりどんよりとした天気でしたが、浜につくと青空が見えるように!ここではサーフボードに乗りパドルで漕ぐスタンドアップパドル(SUP:Stand Up Paddleboard)に挑戦します。 参加したメンバーはみんな初めての経験ということで、始まる前から緊張・・・。しっかりとレクチャーを受けたら、いよいよ海にでます。離れた場所にある石山までいって戻ってくるというコースでしたが、行きは海から陸地に吹く風に苦戦して、なかなか思うように前に進みません。 ガイドさんに運ばれるメンバーも・・・。 それでも何とかたどり着き、Uターンして浜に戻ります。帰りは流れに身を任せていれば、あまり漕がなくても進むのでとても楽!暖かな日差しの中でサーフボードの上に寝転んで波に揺られると、時の流れがとてもゆっくりと感じました。無事に戻ってきた後は記念撮影! SUP楽しかった~! 高速船で沖縄の原風景を体感できる島へ SUPで石垣の海を堪能した後は、ガイドさんに離島ターミナルまで送っていただき、竹富島へ向かい、自転車をレンタルして島を巡ります。赤瓦の平屋が広がり、住宅のいたるところにシーサーがいる風景は沖縄の原風景を感じさせる街並みでした。 思い描いていた沖縄の原風景がここに。 サイクリングをして少し経つとお昼時ということもあり、沖縄名物のソーキそばを食べることに。初めて食べたのですが、コシの効いた麺にかつお節の風味と塩気のあるスープ、そして何よりスペアリブはトロトロでとても美味しかったです! 大きなスペアリブが入って食べ応え満点! 昼食もいただきサイクリングを再開。島にあるビーチを目指します。 やってきたのは「カイジ浜」(通称:星砂の浜)。この浜では星の形をした星砂を見つけることができ、みんなで探します。残念ながら見つけた星の砂は、持ち帰ることができないのですが、とてもロマンチックで素敵な場所でした! ディナーはお待ちかねの石垣牛 竹富島から帰ってきたら、いよいよディナーの時間です。せっかく石垣島へ行くなら石垣牛が食べたい!ということで、離島ターミナル近くにお店を構える「Ishida.」さんへ。お店に入り、席に着くと早速お目当ての石垣牛が登場!思わずみんな写真を撮り始めます。 思わず写真を撮り始めるメンバー お肉が口の中で溶けるとはこういうことなのか!と思うくらい噛まなくてもすぐ消えてしまうお肉。美味しいお肉と美味しいお酒、そして楽しい会話。本当に素敵な夜を過ごしました! 見るとお腹が空いてきます。 3日目 最終日はお土産を求めて市街地へ 最終日はお土産を探しに市街地を散策します。やってきたのはお土産屋さんが軒を連ねる「ユーグレナモール」。 お土産屋さんがたくさん この商店街にはお土産屋さんのみならず、新鮮な魚や石垣牛が売られている「石垣市公設市場」など、さまざまなお店があります。茶碗の中にシーサーがいる「教訓茶碗」や石垣島の紅芋で作られた「紅芋タルト」、泡盛などバラエティーに富んだ品々が並び、あれもこれもと買ってしまいました。買い物を終えたら海を一望できるカフェでランチ。 気持ちいい風に当たりながら石垣島最後の食事 最終日は東京に戻るためあまり観光できる時間がなく、これにて終了。 一度ホテルに戻り集合して空港へと向かい、帰路につくのでした。普段の旅行では、なかなか足を運ぶ機会がない場所にいくことができ、非常に有意義な3日間でした。早くも来年の社員旅行が待ちきれません・・・!早く来年にならないかなぁ。...

お問い合わせ

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

関連コンテンツ