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

COLUMN

コラム

Y.Mが執筆した記事一覧

プロダクション
2021年7月26日

スクロール時のみ表示されるスクロールバーを実装してみる

概要 ある案件で、「Macのスクロールバーのように、スクロール時にのみ表示され、 一定時間経過で徐々に非表示にさせるスクロールバーを実装出来ないか」と相談がありました。 この相談を実現させるため、試行錯誤しながら実際に作成した過程をご紹介します。 ※以下、画面は「HTML」「SCSS」「JS」「Result」のボタンで表示切り替えができます。 最初に試したこと 以下の手順でクラスを付け変え、スクロールバーの表示/非表示の切り替えを行ってみます。 スクロールバーの非表示用のクラスを設定 スクロールさせたときに非表示用のクラスを取り除く スクロールを止めて2秒後に非表示用のクラスを設定 See the Pen customScroll1 by ymtps (@ymtps) on CodePen. ブラウザで確認 結果 表示/非表示の動きだけであれば問題ないのですが、 ふわっと消える(徐々に消えていく)アニメーションが出来ていませんでした。 フェードアウトアニメーションで消したいので、単なる表示/非表示の切り替えではなく、 CSSのtransitionとopacityを使って実現できないかを考えてみます。 結論 スクロールバーの上に背景色と同じ色の要素を被せて、 opacityを使って透過アニメーションさせてみます。 (※"hidden-scroll"のクラスを参照) そうすると、要望通りの動きが実現できました。 See the Pen customScroll2 by ymtps (@ymtps) on CodePen. ブラウザで確認 なお、"::-webkit-scrollbar"を使う方法も考えましたが、IE対応をしていないため、 今回は上記で実現しています。 ...

プロダクション
2020年11月9日

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

本コラムについて 本記事は前回のコラムの続きとなっております。 前回ご紹介したアプリの実際のソースと、工夫した点を記載しております。 (共通ファイルやcssについての説明は省いております。本記事の最後に全体ソースを公開しておりますので、そちらからご参照下さい。) 前回のコラム:Nuxt.jsで選択式クイズアプリを作ってみた 工夫した点 問題文と選択肢は問題解答画面と解答結果画面の両方で呼び出しているため、コンポーネント化を行った。 解答をやり直したい場合もあるのを考慮し、前の問題に【戻る】ボタンを設置した。 解答結果画面では、自分が選択した解答と正しい答えが分かるようにした。 繰り返し問題が解けるように、問題と選択肢のランダム機能を作成した。。 作成したファイル ①メインページ(/pages/index.vue) ②トップ画面コンポーネント(/components/top.vue) ③問題解答画面コンポーネント(/components/questions.vue) ④解答結果画面コンポーネント(/components/result.vue) ⑤問題コンポーネント(/components/questions/qInfo.vue) ⑥コンポーネント共通Storeファイル(/store/common.js) ソースの中身 メインページ(①/pages/index.vue) 本アプリのページはこの1ページのみ。 画面中央に表示しているコンポーネント要素を切り替えることで、 複数の画面を表示させている。 <template> <div class="main"> <div class="top"> <top v-if="dispType === 'top'"></top> <questions v-if="dispType === 'questions'"></questions> <result v-if="dispType === 'result'"></result> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; import Top from '~/components/top.vue'; import Questions from '~/components/questions.vue'; import Result from '~/components/result.vue'; import settingsJsonPath from '~/assets/json/settings.json'; // 設定ファイル export default { data() { return { } }, computed: { ...mapState('common', [ 'dispType', 'settingOption', ]), }, created () { this.readSettings(); // 初期表示設定 }, components: { Top, Questions, Result }, methods: { ...mapMutations('common', [ 'setSettingOption', 'setDispType', ]), /** * 初期表示設定 * * 設定ファイルをstoreに格納し、トップコンポーネントを表示 */ readSettings() { this.setSettingOption(settingsJsonPath); // 設定オプション情報をstoreに格納 this.setDispType('top'); // トップコンポーネントを表示 }, } } </script> ②トップ画面コンポーネント(/components/top.vue) 問題を選択する画面 汎用性を持たせるために、タイトルとボタンの表記は設定ファイルの内容から取得している。 <template> <div class="topComponent"> <h2 class="title">{{title}}</h2> <div class="contents"> <div class="select_question"> <p>問題を選択</p> <ul> <li v-for="(fileInfo, index) in settingOption.questionPaths" :key="index" @click="selectQuestion(fileInfo.filePath)" :class="{'selected': selectQuestionPath === fileInfo.filePath}"> {{fileInfo.title}} </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="showQuestionCoponent()" :disabled="!selectQuestionPath">{{btnName}}</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import axios from 'axios'; export default { data() { return { title: '', // メインタイトル btnName: '', // ボタン名 selectQuestionPath: '', // 選択した問題集のファイルパス } }, created() { this.selectQuestionPath = ''; // 選択ファイルパスのリセット this.setSettingName(); // タイトルとボタン名を設定 }, computed: { ...mapState('common', [ 'questionList', 'settingOption', ]), }, methods: { ...mapMutations('common', [ 'setDispType', 'setQuestionList', ]), /** * タイトルとボタン名を設定 * * 設定ファイルの内容からタイトルとボタン名を設定 */ setSettingName() { this.title = this.settingOption.title; this.btnName = this.settingOption.btnName; }, /** * 問題コンポーネントを表示 */ showQuestionCoponent() { this.readQuestions(); // 問題情報を読み込む }, /** * 問題情報を読み込む */ readQuestions() { axios.get(this.selectQuestionPath).then((response) => { this.setReadQuestions(response.data.questionList); this.setDispType("questions"); }).catch((error) => { console.log(error); }) }, /** * 読み込んだ問題情報をstoreに格納 * * @param {object[]} questionList 問題情報 */ setReadQuestions(questionList) { // 問題をランダムにする if (this.settingOption.randam) { questionList = this.shuffleArray(questionList); } // 選択肢をランダムにする if (this.settingOption.choiceRandam) { questionList.forEach((questionInfo, index) => { questionInfo.choice = this.shuffleArray(questionInfo.choice); }); } this.setQuestionList(questionList); // 問題情報をstoreに格納 }, /** * 選択した問題集のファイルパスを設定 * * @param {string} filePath 問題集のファイルパス */ selectQuestion(filePath) { // 既に選択している場合は選択状態を解除 if (filePath === this.selectQuestionPath) { this.selectQuestionPath = ''; } else { this.selectQuestionPath = filePath; } } }, }; </script> ③問題解答画面コンポーネント(/components/questions.vue) 問題を解答する画面 前の問題に【戻る】ボタン押下で1つ前に解答した問題に戻ることも出来る。 問題内容と選択肢は問題コンポーネントを呼び出して表示 <template> <div class="questionsComponent"> <div class="header"> <button class="btn btn-back" @click="showPreviousQuestion()" :disabled="qIndex === 0">前の問題に戻る</button> </div> <div class="contents"> <div class="quetion-area"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :answerList="selectAnswerList" :mode="'question'"></question-info> </div> <div class="btns-area"> <button class="btn" @click="answerQuestion(qIndex+1)">解答</button> </div> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { questionInfo: {}, // 表示する問題情報 qIndex: 0, // 問題のインデックス correctCount: 0, // 正解数 selectAnswerList: [], // 選択した解答リスト } }, created() { this.showQustion(); // 表示する問題情報をセット }, computed: { ...mapState('common', [ 'questionList', ]), ...mapGetters('common', [ 'getSelectChoiceStore', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common', [ 'setDispType', 'setCorrectCount', 'setSelectAnswerList', ]), /** * 表示する問題情報をセット */ showQustion() { this.questionInfo = this.questionList[this.qIndex]; }, /** * 解答ボタン押下処理 * * 答え合わせをして、次の問題を表示。最後の問題の場合は解答結果画面を表示。 * * @param {int} nextIndex 次の問題のインデックス */ answerQuestion(nextIndex) { this.checkCorrectAnswer(); this.qIndex = nextIndex; if (this.questionList[this.qIndex]) { this.selectChoise = ''; this.showQustion(); } else { this.setCorrectCount(this.correctCount); this.setSelectAnswerList(this.selectAnswerList); this.setDispType("result"); } }, /** * 前の問題に戻るボタン押下処理 * * 前の問題を表示。選択肢のラジオボタンも自分が解答した選択肢の値にする。 */ showPreviousQuestion() { this.qIndex = this.qIndex - 1; // 問題のインデックスを一つ前に設定 this.showQustion(); // 前の問題を表示 this.selectChoise = this.selectAnswerList[this.qIndex]; // 前の問題で選択した選択肢を設定 }, /** * 選択した問題の答えチェック * * 正解の場合は正解数をインクリメントする。解答リストに自分が選択した解答を追加。 */ checkCorrectAnswer() { if (this.getSelectChoiceStore === this.questionInfo.answer) { this.correctCount++; } this.selectAnswerList[this.qIndex] = this.getSelectChoiceStore; } }, }; </script> ④解答結果画面コンポーネント(/components/result.vue) 答え合わせをする画面 正答率だけではなく、自分が選択した解答と正しい解答を色分けで表示している。 <template> <div class="resultComponent"> <h2 class="title">全{{questionList.length}}問中、{{correctCount}}問正解です。</h2> <div class="contents"> <div class="answers"> <ul> <li v-for="(questionInfo, qIndex) in questionList" :key="qIndex"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :mode="'answer'"></question-info> </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="backTop()">終了</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { } }, created () { }, computed: { ...mapState('common', [ 'correctCount', 'questionList', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common',[ 'setDispType', ]), /** * トップ画面に戻る */ backTop() { this.setDispType("top"); } }, }; </script> ⑤問題コンポーネント(/components/questions/qInfo.vue) 問題と選択肢を表示するコンポーネント 問題解答画面と解答結果画面の両方にて本コンポーネントを呼び出している。 <template> <div class="qInfoComponent"> <div class="header"> <p class="title"> 問{{qIndex+1}} <span v-if="mode === 'answer' && questionInfo.answer === selectAnswe...

プロダクション
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 記述式)。 さいごに 今回は作ったシステムの大まかな概要を説明しましたが、次のコラムでは本システムのソースコードを交えながら各コンポーネントの説明が出来ればと思います。 ...

会社紹介・その他
2019年6月3日

新卒採用サイト制作秘話

2020年度新卒採用サイトを制作しました。 全てのコンテンツが公開されましたので、制作について少し書かせていただきます。 半年の制作期間を経て公開 昨年の秋からどのようなサイトにするかの構想を考え始め、サイトコンセプトやコンテンツの見直しをおこなっていきました。大枠が決まったところで後藤社長にプレゼンし、現在公開されている案の原案に決定しました。その後、年明けから本格的なデザイン作業に入り、制作を進めていきました。 OfficeとPeopleのカテゴリを強化しました! 3月にオフィスがリニューアルしたため、コンテンツの見直しから企画を進めました。前年までは同じようなコンテンツとなっていましたので、今回カテゴリの見直しをして、「Office」と「People」の2つカテゴリを強化しました。 今までは、川の字に机が並び殺風景な雰囲気の執務室で仕事を行なってきましたが、社員が増えたことやフリーアドレス化が進んだことで全面的にリニューアルすることとなりました。新卒採用サイトの企画案を作成している段階では、まだリニューアルの内容を詰めているところでしたので、私自身もどんなオフィスになるのかとドキドキしていました。 Good!コミュニケーション"を設計したオフィスリニューアルプロジェクト 新オフィスのフリーアドレススペース 新卒採用サイトでは、リニューアルしたOfficeがどんな様子なのか、来年度入社する学生さんたちが少しでもトライベックで働く自分の姿をイメージしてもらえたらと思い、オフィスの中をエリアに分けて紹介しました。また、各エリアでは社員からエリアについてのコメントも掲載しています。 多くのメンバーに協力いただき、過去最大人数を掲載中! 今まではコンサルタントのみの採用でしたが、2020年度では新たに、ITエンジニア、Webデザイナーの職種も募集することとなり、Peopleでは過去最大人数を紹介させていただいています。そのため今回は、様々な部署のメンバーを掲載することとなり、新卒からキャリア入社、執行役員まで様々な経歴や役職をもった方にご協力いただきました。 トライベックでは、様々な職種のメンバーがワンフロアで働いています。 ワンフロアで働くことで、見渡すとどこかにチームのメンバーが仕事をしていて困ったこともすぐに相談できるような雰囲気になっていますし、案件を行う際にもチームメンバーでの連携が取りやすいメリットもあります。また、職種関係なく各メンバーが仲良く楽しく案件ができているように私は感じています。そんなトライベックのリアルな業務や日常など、トライベックでの社会人生活をイメージしてもらえたらと思っています。 2年連続で作成したことでの気づき 私は2017年に新卒として入社し、昨年の新卒採用サイトの制作にも関わらせていただきました。その際は先輩デザイナーと共に企画案からサイト制作に携わりました。それまでは、先輩デザイナーの下で写真選定やアイコン制作などサイトの一部分の制作にしか関わったことがなかったので、サイト制作の大部分に関われたことが楽しかった思い出があります。 2019年度新卒採用サイトTOP そこから半年ほど経ち、今年は先輩デザイナーにアドバイスをもらいつつ、基本は私自身で企画案を考え、サイト制作を進めていくこととなりました。昨年と比べてできるようになったことはたくさんありますが、ほぼ1人で企画からサイトデザインを行ったことはなかったので、面白そうだと思う反面、完成するのか不安でもありました。 また今年は、ディレクションの部分も担当しました。デザインを作成しながら先輩たちの原稿、フォトディレクション、コーダーへのサイトのイメージ共有...とデザインだけでないサイト制作の大部分に関わらせていただきました。 風が強い時は、髪を整えて少しでも良い写真が撮れるようにしました! 中でもフォトディレクションに関しては、今まで経験したことがなかったので難しかったのですが、とても楽しい時間でした。私自身一眼レフカメラを持って色々な場所を訪れたりしていますが、今回は社内カメラマンにご協力いただき撮影することとなりました。自分の中ではこんな感じの写真がいいかなと思っていても、それをモデルやカメラマンに伝えてイメージに近づけていく作業がとても大変でした。たくさん撮影した中から、デザインに当てはめたページが出来上がっていった時には、とてもやりきった感じでした。 会社説明会にぜひご参加ください! 残念ながら新卒採用サイトだけでは、トライベックについてすべてを伝えられません。 また、トライベックの社員が働く姿を間近で感じて社会人になるイメージに繋がればと思います。 トライベックの説明会では後藤社長だけでなく、今年の新卒メンバーをはじめとした先輩社員からトライベックについて直接話しを聞くことができます。 新卒採用サイトだけではわからないトライベックを、説明会を通じて感じていただけたらと思います。 2019年5月29日(水)に第1回の2020年度新卒会社説明会を行いました。次回は、2019年6月26日(水)に行われます。少しでも興味を持っていただけたのなら、ぜひ一度説明会にお越しください! 来年度一緒に働けることを楽しみにしています。 新卒採用サイト...

社内イベント紹介
2018年11月12日

トライベック社員旅行2018 in セブ島(1班)

トライベックでは10月26日(金)〜29日(月)にかけて社員旅行に行ってきました。昨年に引き続き、今年の社員旅行も”フィリピンのセブ島” と海外になりました。 参加者を2つの班に分けて、中日に合流するというスケジュールです。私からは1班のレポートをお届けいたします。 成田空港第2ターミナル 朝7:40集合 → セブへ 集合時間がはやい!就業時間が10時のトライベックにとっては、かなりハードルの高い集合でしたが、なんとか全員集合しました。 出国前の様子 東京からセブへは約5時間半のフライトでした。まさかの機内モニター画面がない飛行機ということで、早々に多くのメンバーは就寝しました(笑) 無事にセブ空港に到着。入国審査も問題なく通過し、空港からバスで移動しました。 セブ・マクタン国際空港 空港はこの夏にリニューアルしたばかりということでとっても綺麗でした! フィリピンは、日本の華金同様に金曜日は早くに仕事を切り上げ、パーティモードに入る習慣があるそうで、道が大渋滞。予定より大幅に遅れてホテルに到着しました。 夕飯は各自自由ということだったので、SM supermarketに行きました。色々なお店を見たのですが、なぜかフードコートでご飯をいただきました(笑) 具だくさんのスープ エビや野菜の入った海鮮スープかと思ったら、まさかの梅干し味!その後は、スーパーで買い出しをしてホテルでプチ飲み会&カードゲーム大会で盛り上がりました。 2日目のフリータイムでは「アイランドポッピング」へ フリータイムということで、いくつかのグループに分かれてツアーなど、思い思いの場所に行動していきました。私は5人グループで、ちょっと早起きして「アイランドホッピングツアー」に参加しました。私たちが参加したツアーはヒルトゥガン島とバンダノン島の2つの島を巡りながらシュノーケリングとランチがセットになったものでした。 ホテルから海まで1時間ほど、台風が近づいているという情報もちらっとありましたが、この日は晴れ!いい海日和となりました。 良い天気! ヒルトゥガン島のシュノーケリングエリアにアレが!? まず1つ目に向かったのはヒルトゥガン島。ここでシュノーケリング開始です。メンバーは初シュノーケリングということでレクチャーを受けさっそく海へ! 海が緑色でとっても綺麗! 海洋保護区であり、魚が多いと言われている場所だけあって、とっても綺麗な光景かと思いきや、海に順番に入っていくとメンバーや他のツアー参加者から、全身がピリピリするとの声が。海を覗いてみるとなんと、たくさんのクラゲが泳いでいました。びっくりして写真撮り忘れてしまうほど、大量にクラゲが発生してしまい、優雅にシュノーケリングができなくなってしまいました。 天国に一番近い島、バンダノン島へ クラゲが大量発生のため、予定を前倒してセブ島の中でも一番天国に近い島と言われているバンダノン島へ上陸しました!白い砂浜とエメラルドグリーンの遠浅の海が広がっていました。 予定より早く上陸することになったため、みんなで島を散歩したり、フォトスポットと呼ばれるところで写真を撮影したりしました。 青い空と透き通る海 船の近くに見たことのない新たなクラゲを発見!日本では見られない品種で毒が少ない種類ということなので、頭をプニプニさせていただきました。なかなかのサイズ感で、見た目は宇宙人のようでした(笑) ガイドさんが握っているのがクラゲ! その後にカニを発見!ちょっと挟まれたりもしましたが、捕まえました。日本では簡単に見られないものばかりでみんなでテンション上がりました! 大きなカニ 船の上でスタッフの方が焼いてくれたお肉やフルーツをいただきながら、まったり休憩した後には、みんなで海に入って遊びました。 船の先端はアトラクション 移動の途中で、スタッフの方に船の先端に乗せていただきました。はじめは波も低く、程よい感じだったのですが、どんどん波が高くなり、しがみついているのがやっとでした(笑) ジェットコースターのように、次に来るタイミングがわからないということもあり、とてもスリリングな体験でした。 先端からの眺めはサイコー! 波にのまれて死にそうになりました・・・。 午前中にシュノーケリングができなかったこともあり、別の海洋保護区へ移動しシュノーケリングをすることになりました。はじめにスタッフの方が数名入り確認していただき、クラゲがいないということで再び準備して入ることになりました。 ここではクラゲがいないので、いい感じに魚たちがみられるかと思いきや、波が高く海水を飲みながら溺れているのか泳いでいるのか謎な状態でした(笑) 写真の奥では社員が泳いでいるのか溺れているのか・・・ メンバー同士でまったく話すことなく、各自必死に海の底を見つめるというシュールな光景でした。ある程度楽しんだところで撤収することになりましたが、最後のシュノーケリングで体力をすべて持っていかれてしまいました。会話も少なく放心状態でした・・・。 1班2班 合同懇親会 この日に到着した2班と現地で合流し、合同懇親会を開催しました。 奥には焼けた?後藤社長 会場は1軒屋のようなレストランで、2Fをトライベックの貸切にしていただきました。 50人のトライベックメンバーがセブに集合し、端には誰が座っているのかわからないくらいでした。 乾杯用のメニューにあった日本らしい感じを醸し出している「KABUKI」を注文してみました。 オシャレなカクテルかと思い頼んでみたらまさかのデキャンタ!周辺がざわつきました(笑) 「KABUKI」感は全く感じられませんでしたが、とても甘くておいしかったです。 デキャンタで出てきた「KABUKI」 ちょっとアジアの街並み散策 あっという間の2泊3日も最終日になりました。11:30にはホテルを出発ということだったのでちょっと早起きしてホテル周辺を散歩しました。 ITパーク周辺 今回宿泊したホテルの向かいにあるITパークの中で、いつもの味を懐かしんで、よく知るスターバックスにいってみたり、セブンイレブンに入ってみたりと散策し、朝食をホテルで食べてチェックアウトをして帰路につきました。 飛行機の窓から綺麗な夕日が見えました! 「もう1日くらい居たかったなー。」とみんなで話しながら解散しました。現地では気づきませんでしたが、意外とみんな焼けていることが次の日の会社で発覚!楽しい社員旅行となりました。 では、次回は2班のレポートへと続きます。...

会社紹介・その他
2018年11月5日

新卒デザイナー2年生の発見!と学び?

私は2017年度新卒でデザイナーとしてトライベック・ストラテジーに入社しました。 入社から1年半がすぎ、今までトライベックで過ごしてきたことを少し振り返ってみました。 クリエイティブUX部に配属 初めは同じ新卒入社メンバーと共に会社の方針や業務、各部署の役割、社会人についてなどの基本的な研修を3ヶ月ほど行い、その後クリエイティブUX部に配属されました。クリエイティブUX部では新卒を採用するのは初めてということでしたが、先輩方にデザインの基礎を教えていただきながら少しずつ制作方法を学んでいます。 私は大学では生活環境デザイン学科に所属し、建築やインテリアなど空間デザインについて学んでいました。就職活動を進めていく中でトライベックに出会い入社することとなりましたが、入社するまではWebデザインについて学ぶ機会がなかったため、興味はありましたが知識は全く持っていませんでした。先輩方から学ぶ部分はとてもたくさんあり、どんなことも新鮮に感じ、知っていくことがとても楽しいです。 空間デザインとWebデザインは、初めは全く接点のないように感じていました。しかし、どちらのデザインにもたくさんの制約がありその上で制作しています。また、人が空間を移動するように、Webサイトはたくさんのページがあり、行ったり来たりを繰りかえす動きが発生するため、行き来のしやすいことやその動きの中で注目して欲しい部分をデザインで作成していきます。その考え方は空間を考える時とよく似ているように私は今感じています。学生のときに学んだことは活用できる部分があまりないと思っていましたが、考える部分にはとても役に立っていると思っています。 印象に残った「新卒採用サイト」 この1年半で先輩方のアシスタントとして様々な案件に関わらせていただきましたが、私が今までの制作の中で印象に残っているのは「新卒採用サイト」です。 今までは、先輩方のアシスタントとしてストックフォトからの写真選定やアイコン制作などサイトで使用する一部分の制作に関わらせていただいていました。新卒採用サイトでは、初めて企画を考えるところからサイト全体の制作に携わることができました。サイトができるのか心配ではありましたがその反面とても楽しみでした。 新卒採用サイトは、来年入社する新入社員の為に、トライベックがどんな会社でどのようなメンバーがどんな仕事をしているのかを知ってもらうサイトです。 今まで自分がトライベックで過ごしてきて感じたことを、就活生にうまく伝えたい一心で先輩デザイナーと共にサイトの核となるコンセプトや見せ方を考えました。また、少しでもよい写真を作成するために、社内外でフォトスポットを検討したり、自分がモデルとなってテストで撮影してみたりと掲載されるメンバーの写真撮影やディレクションなどにも関わりながら様々なデザインパターンを作成して検討しました。人事担当やカメラマン、社内のメンバーにどのようなサイトを作成したいのか、どのような写真を撮りたいのかを伝えることはとても難しかったです。 新卒採用サイトを通じて、言葉のコミュニケーションや写真撮影・ディレクションについてとても興味を持ちました。 社内セミナー「トラコピ!」参加 現在、私は社内セミナーの1つである「トライベックコピーライティングジム(通称:トラコピ!)」に参加しています。社内のクリエイティブディレクターでコピーライターの方が講師となり、実際に過去の事例なども踏まえながらコピーライティングについて学んでいます。 トラコピ!ではコピーライティングの力だけでなく、アイディアの発想法、他のメンバーの考え方を知ることで、またさらに新しいアイディアに繋がっています。また、Web制作ではデザイナーが文章を作成する機会もあるので、文章表現も同時にトラコピ!で学べることができ、今後の提案等の実制作にも役立ちそうです。 トライベックでは、様々な職種の方が1つのフロアで仕事をおこなっています。デザインの知識だけでなくコンサルティングやシステムなどの幅広い知識を得ることができます。トラコピ!以外にも全社員対象にした部署ごとの勉強会や新人向けのコンサルティングセミナーなどが定期的に開催されており、社内で様々な知識を学ぶ機会があります。また、知識を学ぶだけでなく社員同士のコミュニケーションの場ともなっているように私は感じています。 現在、私はトライベックではじめてのアプリ制作のプロジェクトにも関わっています。 トライベックでは自分から手を上げることで様々なプロジェクトに参加することができます。自分のデザインが世の中に出て広がっていくことが実現するように頑張っていきたいと思います。トライベックならではの豊富な知識や経験を生かして、ユーザー視点をもったデザイナーとして成長できるように頑張っていきたいと思います。...

お問い合わせ

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

関連コンテンツ