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

COLUMN

コラム

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

会社紹介・その他
2021年4月19日

2021年度入社式 新卒社員6名が入社

2021年4月1日当社オフィスにて2021年度新卒社員入社式を開催しました。 昨年は新型コロナウイルス感染拡大の影響により入社式をオンラインにて開催しました。しかし、本年度は「新卒社員の入社をリアルで歓迎してあげたい」との思いから、人数制限、感染防止対策のもと、対面での入社式を実施しました。 当社は2020年6月からリモートワークを中心とした“トライベック・ニューノーマル”という新しい働き方になりました。新しい働き方にチャレンジして1年が経過しようとしています。現在でも多くのメンバーがリモートワークです。そのような中で、既存メンバーと新卒社員を“つなげる”ことは出来ないかと模索していました。 そこで、思い付いたのが、いままでにない新しいカタチの【LIVE配信】です。LIVE配信をすることで、新卒社員が入社したことを強く認知することが出来て、実際に顔を合わせたとき、会話のキッカケにもなると思ったからです。 新しいカタチの2021年度新卒社員入社式LIVEがはじまり、期待に膨らむ新卒社員へ、代表 後藤から夢を持つ大切さなど激励のメッセージがあり、一人ひとりに辞令交付をしました。 代表 後藤による祝辞 *祝辞のときのみマスクを外しています 新入社員への辞令交付 入社式オープニング画像はLIVE配信時、開催前に映し出されていたものです。この画像は2020年新卒入社のデザイナーが制作しました。これからつづく未来への期待を、つづく桜並木で表現しています。これからたくさんの喜び、苦労があると思いますが、成長する未来がある。そんな思いを込めています。 夢を持ち、たくさん挑戦して失敗と成功を繰り返し、大いに成長した姿を近い未来、期待したいと思います。 入社式オープニング画像 社会人生活では、喜びや苦労、思い通りにいかないなど様々なことを経験していくでしょう。全ての経験が成長していく糧となると思います。前を向いて、未来に向かって歩んでください。 2021年度新卒社員6名 *撮影のときのみマスクを外しています...

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

トライベックの21期がスタートしました

2021年4月1日。当社は決算期変更に伴い、本日より21期目をスタートします。本日、新たな一年が始まる企業が多い中、依然として新型コロナウィルス感染の収束が見えず不安定な経済環境となっています。しかし、ワクチンや感染予防の知識、そしてニューノーマルなど「新たな未来の形」が到来しようとしていることを実感しています。たしかに未曽有の環境ではありましたが、多くの常識が覆され、価値観を一変させるなど、さまざまな変化があった1年でもありました。そうした変化の渦中で、自らを律し、改めてゼロベースで物事を考えることの大切さを再認識するきっかけとなりました。「社会の未来」とは、「日本の未来」とは、「トライベックの未来」とは、もう一度原点に立ち返り、未来の在り様を考えることで、今までトライベックの仲間と共に築き上げてきた不変の価値を再確認できました。そしてその不変の価値は、間違いなくこれからの未来に必要とされる価値だということを確信しています。 ひとにやさしく、つなぐデジタルを ひとにやさしく、つなぐデジタルを これが私たちの掲げる不変の価値です。DX(デジタルトランスフォーメーション)による変化は、企業の経済活動を大きく変えることになります。そうした中で、そこに対応できずに遅れを取り、取り残されている企業が数多くあることも事実です。真の意味でのDXとは何か。企業の想い、顧客の想い、ひとの想いが置き去りにされたテクノロジーファーストのDXになってはいないか。そんな思いを巡らせます。私たちが提供する価値、「ひとにやさしいデジタル」には、そんなひとの想いがこもった、ユーザーオリエンテッドなDXの在り方を追求する考え方です。誰のための、何のためのDXなのかを改めて考え、ひとにやさしいデジタルで企業の大きな成長を支える基盤づくり、これこそが真の意味でのDXではないかと思うのです。 機は熟した。日本のデジタル化はこれからだ。DIGITAL INNOVATION for the future 機は熟した。日本のデジタル化はこれからだ。DIGITAL INNOVATION for the future デジタルの力で日本社会を大きく変えるイノベーションを起こす。それは私にとっての悲願でもあり、トライベックが目指す未来の社会でもあります。昨年末のリリースの通り、株式会社ミロク情報サービスとの資本業務提携することにより、その歩みはこれまでにない大きな一歩となります。そして本日、私たちは新たな決断をしました。会員数300万人を保有する書式テンプレートポータルサイト「ビズオーシャン」を展開している株式会社ビズオーシャンを吸収合併し、メディア・広告代理事業を展開していきます。これにより、新生トライベックは大きく4つの事業に再編します。エクスペリエンスマネジメント(XM)事業、デジタルマーケティング事業、DXプラットフォーム事業、そしてメディア・広告代理事業です。これによって、リードジェンから顧客育成、ブランディング、オウンドメディア、グロースハックなど、DXに必要なあらゆる機能を保有し、クライアントへのこれまで以上の価値提供をお約束します。まさに機は熟したのです。日本のデジタル化を支える企業のひとつとして、責務を全うする考えです。 Welcome Changes変化を受け入れ、変化を楽しみ、変化し続ける Welcome Changes変化を受け入れ、変化を楽しみ、変化し続ける 変化はこれからも弛まなく続きます。会社も、個人も、変わることを前向きに捉え、そして次の未来を想像する時期です。この激動の時代において、企業が目の前の大きな波にのまれることなく、乗るために前に進めていくこと。それが今求められていると感じています。21期.私たちは「統合型DXプラットフォーム」を展開すべく、準備を着々と進めています。これまでにないスケールで、これまで以上の価値を提供する。変化の時代だからこそ、私たちトライベックはさらなる進化を遂げていきます。どうぞご期待ください。 トライベック株式会社 代表取締役社長 関連リンク トライベック、株式会社ビズオーシャンを合併 ~メディア事業・広告代理事業統合による総合型DXコンサルティング企業へ~...

社内イベント紹介
2021年3月29日

お仕事前の朝ヨガで気分リフレッシュ!

皆さんは運動していますか? コロナの影響でリモートワーク中心の生活になってから、約1年が過ぎました。 自宅で仕事をしていると、スマホに入っている万歩計の数字が、「2桁台」ということがしばしばあります。 家の中でスマホを持って歩かないという理由もありますが、いずれにしても、ほぼ座りっぱなしの生活です。会社に通勤していたときの万歩計の数字は、おおよそ7~8千歩でした。 通勤とオフィス内だけでも、思った以上に歩いていたんですね。 そんな話があちこちから出ているのを受けて、ユニットリーダーのメンバーから構成される、我々「業務外コミュニケーション企画チーム」では、「ヨガ」を企画することにしました。運動不足の解消が目的ではありますが、それと同時に、普段、業務で接する人以外とも、気軽にコミュニケーションをしてもらいたいという目的もあります。 レッスンスタート ヨガは、朝の業務開始前の20分で行いました。通勤時間がなくなったので、朝に余裕が出来た人も多いと思います。また、朝から軽い運動をすることで、業務効率アップを狙います。 参加は、オンラインでも、大会議室を利用してリアルでもどちらでもOK。インストラクターは、「COCOYOGA」から「吉田なる」先生に、オンラインで指導をしていただきました。 参加者は総勢25人。性別や年代、偏ることなく、様々な人が参加されました。 レッスンは、大きく深呼吸することから始まり、姿勢改善や肩こりに効くポーズ等、テレワーク民には嬉しい指導が続きます。 吉田先生は、同じポーズでも、椅子に座っている人用、床に座っている人用、細やかな指導をされます。 普段PCに向かっていると、前かがみになりますが、姿勢が伸び、胸が開いて、思っている以上に、気持ちがいいですね。 レッスンを終えて 20分のレッスンでしたが、じんわり汗をかき、気分的に大変リフレッシュしました。 朝から体を動かすのは、とても良いですね。 参加したメンバーからも、 「早朝にジムいってきてからの、ヨガ最高に気分高まりました!朝からフレッシュな気持ちです笑! ありがとうございました」 というコメントがチャットに流れ、皆が賛同のリアクションを送ります。 社内でヨガのレッスンを受けることで、業務に関係なく和気あいあいとしたコミュニケーションをとることができました。 今後 レッスン後、参加者・不参加者含め、全社にアンケートを取りましたので、その一部をご紹介します。 総回答数:35名 (オンラインヨガの実際の参加者:25名) 満足度は、4.55で大変好評でした。 「ヨガでどのような悩みを解消したいですか?(複数回答可)」という質問には、テレワークの為、位:首・肩こり、2位:姿勢、3位:目の疲れ、と続きます。 次回の開催については、「参加したい」「時間が合えば参加したい」合わせると9割超えです。 感想やご意見については、 ・肩から背中にかけて伸びました。天気はどんよりですが、朝からすっきりした気分で仕事ができそうです。 ・初めての経験でしたが、説明もわかりやすく良かったともいます。 ・始業前に体がほぐれ、気持ちよかったです!ヨガに興味があったので良い時間でした。また機会があれば参加したいと思います。 ・始業前のヨガで体だけでなく、心も少し落ち着くようになりました。 ご企画の方、および先生にありがとうと言いたいです。 ・どうもありがとうございました!ゆるゆると動くヨガかな?思っていましたが、地味に筋トレ要素も含まれていて気持ち良かったです!先生の声も語尾まで非常に聞き取りやすく、助かりました。 また機会がありましたら、もう少し大きく動くポーズにもチャレンジしてみたいです。 ココロにもカラダにも、良い効果があったようです。 我々「業務外コミュニケーション企画チーム」では、今後も引き続き、「ヨガ」等の楽しい企画を開催していきたいと思います。...

プロダクション
2021年3月15日

Lightroom Classicで写真をシネマ風に演出する(2)

第2回は、ディティール調整や色味の調整について紹介します。 色味の調整は写真をシネマ風に演出するための要です。同じ写真でも色と色の組み合わせによって、『映画やMVで見たようなあの一シーン』に近い雰囲気を出すことができます。 空の冷たさや夕日の暖かさを強調したり、恐怖の館にいるようなポートレートを演出したり、色味を抑えて静寂な雰囲気にしてみたり…。 今回は青を基調として、青山通りをCool&Futureな感じに染め上げます。 ディテールを調整する もう少しパリッとさせて、明瞭感とシャープな雰囲気を出していきます。 写真のシャープさを調整するために「コントラスト」「明瞭度」※12という二つのパラメータがあります。 明瞭度を上げる 今回は明瞭度のみ使います。 コントラストは6から0にリセットして、明瞭度を38にしました。 彩度を調整する ここからは彩度、つまり色の鮮やかさの度合いを調整しています。 自然な彩度と彩度を下げる 「自然な彩度」と「彩度」※13を下げて、写真から全ての色相の彩度を落とします。 自然な彩度は-35、彩度は-5にします。 なぜこんな地味な色合いにするかというと、それは「色飽和※14」という現象を防ぐためです。 色飽和とは、ものにペンキをべったりと塗ったような、色の階調や立体感が感じられなくなっている状態です。 これから写真に青みを重ねていくのですが、重ねる前の写真が鮮やかすぎると、うまく青みがのらずにこの色飽和を起こしてしまいます。 なので、一旦彩度を落とすという下ごしらえをしているわけです。 トーンカーブで明るさを調整する 今まで触っていた【基本補正】パネルの下にある【トーンカーブ】パネルを使っていきます。 カーブ(初期表示時は右肩上がりの曲線)を操作することで、明るいところや暗いところ、そしてコントラストを視覚的に調整できるツールです。 あまりぐりぐりカーブさせると明るさも色味も崩壊してしまうので、この機能を使う場合は画像を拡大・縮小しながら進めます。 黒つぶれと白飛びを抑え、コントラストを高める 左下、カーブの左端を少し持ち上げて黒つぶれを抑えました。同様に右上も少し下げて白飛びしないように調整しています。 そのほか、緩やかなS字状にカーブさせることでコントラストをわずかに高めています。 色味を調整する ここからは青みを足しつつ色の調整をしていきます。 基礎知識としてRGBや光の三原色、色相環、補色に対する理解が少しでもあると他の写真でも応用が利くと思います。 それではさっそく、【カラーグレーディング】パネルに移動してください。 移動すると、何やら「中間調」「シャドウ」「ハイライト」とラベルがついた大きな円が三つあるはずです。 この明暗別色補正こそが、カラーコレクションにおいて最も重要な機能です。 明るさの観点から、画像内を以下の三つもしくは二つにエリア分けして、それぞれのエリアに指定した色を重ねる役割を持ちます。 ハイライト(明るいところ) 中間調(明るくも暗くもないところ) ここに何も設定しない場合は、ハイライトとシャドウで二つのエリアになります。 シャドウ(暗いところ) ハイライトエリアに青みを足す 以下の画像を見て、赤枠で囲んだ白くて丸いボタンを押してください。 「ハイライト」というラベルがついた円が一つ表示されたかと思います。 ハイライトの色相に220、彩度を40にしています。明るい部分に淡い青色のカラーセロハンを被せた状態だと思ってください。 黄色っぽかったのが一気に青っぽくなりましたね。 シャドウエリアに青みを足す 同様に暗い部分にも青みを足していきます。 先ほど押した白い丸から二つ左に飛んで、黒い丸を押してください。 そこからシャドウの補正ができます。 シャドウの色相に205、彩度を40にしています。 ポイントカーブ(ブルーチャンネル)で青みと黄みを調整する もう一段階、「トーンカーブ」の「ポイントカーブ」を使って色味を整えていきます。 トーンカーブパネルの右側にある青色の丸を選択して、ブルーチャンネルのカーブを表示してください。 中間くらいの明るさ(中間調)で青みを強め、最も明るい部分の青みを下げて、最も明るい部分だけは黄色と赤が若干強めに出るようにしています。 HSLパネルで色味ごとに調整する 続いて、【HSL】パネルを使って色味ごとに調整を行っていきます。 先ほど使った【トーンカーブ】パネルの真下にあるパネルです。 【HSL/カラー】という表記になっていますが、HSLという文字がグレーになっている場合は【カラー】パネルが表示されている状態です。HSL or カラーの選択式になっているので、グレーになっているHSLの表記を押してください。 【HSL】パネルが表示されると、「色相|彩度|輝度|すべて」とまた4つの選択肢があるので、「すべて」を選択してください。 ここではいくつかの調整をまとめて行います。 左車線、テールランプの印象を強くするために、以下の調整を行います。 「マゼンタ」の色相を+70にして、色味を赤に近づけます。 「レッド」の彩度を+28に、「マゼンタ」の彩度を+51にして、赤みを鮮やかにします。 「レッド」の輝度を-14に、「マゼンタ」の輝度を-7にして、赤みを暗くして印象を強めます。 青みをもう少し鮮やかにします。 「ブルー」の彩度を+35にして、青みを強めます。 右車線、ヘッドランプの軌跡に乗っていた黄みを取り除いて、クール感を強調します。 「イエロー」の彩度を-40にして、黄みを弱めます。 もしもここがシカゴで、イエローキャブなるものが路上に止まっていれば、このやり方はしません。 なぜなら、写真のどこかに黄色い被写体があればその部分にも影響してしまうからです。 その場合はこれから紹介する部分補正を使って、軌跡のみを選択して、選択した範囲のみ黄みを弱めます。 かすみを取り除き、ディテールを最終調整する ここからは、かすみを除去したり、写真のノイズを低減したりとディテールの最終調整を行います。 かすみを除去する かすみというのは、早朝や黄砂のシーズン中によくある「なんかモヤっとした感じ」のことです。 山頂や高層ビルから眺める景色がモヤっとかすんでいて、せっかく名所に来たのに残念だった…。という思いをしたことがあるかと思います。 Lightroom ClassicやCCには、そんなかすみを取り除いてより鮮明な写真にする「かすみの除去」という機能があります。 【基本補正】パネルに立ち返り、「かすみの除去」を使って画像をパリッと仕上げていきます。 ここで極端に値を上げてしまうとまた色味や彩度に大きく影響してしまうため、今回は+15にしています。 ノイズを低減する 次はノイズの調整に移ります。 写真のノイズには「カラーノイズ※15」と「輝度ノイズ※16」の2種類があります。 どのノイズがどれくらいあるかというのは、画像を拡大して判断します。 空の部分を拡大してみたところ、カラーノイズは気になりませんでしたが、輝度ノイズがやや気になりました。 なのでこれを【ディテール】パネルの「ノイズ軽減」下、「輝度」パラメータを使って輝度ノイズを減らします。 完全にノイズを取ろうとすると、のっぺりした写真になってしまいます。様子を見ながら20ずつ程度上げていき、ビル群の細かいディテールを潰さないように今回は+53にしました。 そうするとノイズは気にならなくなりましたが、弊社がある青山安田ビルにある窓の細いフレーム部分がぼやけた感じになってしまいました。 大を得れば小を失する、これをできるだけ防ぐために、輝度パラメータの下にある「ディテール」パラメータで追加調整します。 ディテールを+63にして、ビルなどの輪郭を強調します。 以上、ここまで写真全体の調整を行ってきました。 次の連載では、Lightroomの優秀な部分補正を大雑把に使っていきます。 連載一覧 Lightroom Classicで写真をシネマ風に演出する(1) Lightroom Classicで写真をシネマ風に演出する(2) Lightroom Classicで写真をシネマ風に演出する(2) Lightroom Classicで写真をシネマ風に演出する(3) Lightroom Classicで写真をシネマ風に演出する(4) --> 補足:用語集 コントラストと明瞭度(Lightroom・PhotoShop用語) どちらも画像のディテール(輪郭)をシャープにしたり、反対にソフトにするときに使う機能です。 「コントラスト」を調整した場合、色味や明るさに大きく影響します。一方、「明瞭度」は色味や明るさに影響を与えません。 その分、同じ数値を指定した場合、コントラストの方が明瞭度と比較してより強く作用します。 Lightroomの「明瞭度」と「コントラスト」は何が違う?画像つきで解説します | はれときどきカメラ* 自然な彩度と彩度(Lightroom・PhotoShop用語) Lightroom・PhotoShopにある彩度の調整に関する機能です。 似たもので「彩度」を調整する機能がありますが、仕様や影響範囲が違います。 「彩度」を使うと写真全体の彩度を一律に調整するのに対し、「自然な再度」では、すでに彩度が高い部分への影響は抑えつつ、彩度が低い部分に強く影響します。また、青系の色味に強く作用するようです。 「彩度」と「自然な彩度」の違いを実例を使って徹底検証。【photoshop / lightroom】 色飽和 彩度が高すぎることで起こる現象のことです。ものにペンキをべったりと塗ったような、色の階調や立体感が感じられなくなっている状態を指します。 色飽和とは 色飽和の意味 カメラと写真の用語 カラーノイズ 写真がざらざらして見えるノイズの一種で、別名を偽色と言います。 本来は存在しない色である赤や青、または緑のピクセルが見えてしまう現象です。 気になるザラザラのアイツ!高感度ノイズの原因とその対処法!! 輝度ノイズ 写真がざらざらして見えるノイズの一種です。 大体はカラーノイズと一緒に出てくるので、二つ合わせて調整します。 おかしな色がある場合はカラーノイズ、そうではなく単純にざらざらして見える場合は輝度ノイズとして対処します。 li:after{ counter-increment: number 1; content: counter(number) "."; } --> ...

プロダクション
2021年3月8日

Lightroom Classicで写真をシネマ風に演出する(1)

はじめに 写真撮影はお好きでしょうか。 コロナ禍の中で、撮影を楽しむ機会が減った方も多くいると思います。 今回はそのような時世の下、新しい写真の楽しみ方として「Adobe Lightroom Classic CC」を使った、写真をシネマ風に演出するカラーグレーディング(カラーコレクション)※1という技法について、連載でお伝えします。 このカラーグレーディングという言葉、もともとは映像作品の世界で使われている用語です。 しかし映像のみならず、今まで自分のカメラやスマホで撮りためてきた写真も、Lightroomを使うことで「北野ブルー」のようなシネマ風や、フィルム風に演出することができます。 今回紹介するやり方はその中の一例ですが、お気に入りの映像作品があれば、その演出を写真で再現してみるのも面白いでしょう。 先にBefore/Afterを掲載します。以下のスライダーを操作して見比べてみてください。 必要なもの Adobe Lightroom Classic CC(MacでもWindowsでも) RAWファイル形式で撮った写真一枚(拡張子の例:*.cr2、*.arw、*.nefなど) 最近はスマートフォンでもRAWファイル形式で撮影できます。よい文明。 ※一応.cr2と.dng形式のサンプルRAWファイルも用意しています。(sample.zip:52MB) その他、モニターをカラーマネジメント(キャリブレーション)しておけば、他の端末で見たときに色味の差が出にくいのでおすすめです。 Lightroomに写真を追加し、現像モジュールを開く Lightroomで写真を調整するためには、「カタログ」というものに写真を追加する必要があります。 写真の追加の仕方、現像モジュールの開き方は以下のサイトを参考にしてください。 カタログへ写真を追加する方法 Lightroomの使い方:第1回 初めてのカタログと画像読み込み設定 カタログに画像を取り込む方法 (Photoshop Lightroom 6/CC) 現像モジュールの開き方は公式の動画を見てください 現像モジュールの理解 この状態から現像してきます。 カラープロファイルは「Adobeカラー」、色温度は撮影時の設定のままです。 他のパラメーターも全て初期状態のままです。 どうでもいい情報ですが、撮影場所は弊社がある青山安田ビル近くの陸橋です。 プロファイル・色温度・WB・階調で下ごしらえをする プロファイルを変更する 今回は写真に追加で青色を重ねたいので、プロファイルを「Adobe標準」にします。 この状態から始めることで、他のプロファイルと違ってやや彩度の低い状態から始めることができます。 「Adobe標準」<「Adobeカラー」<「Adobe風景」の順で鮮やかになります。 カメラ標準のプロファイルから選ぶこともできますが、カメラメーカーによって違うのでここではあえて触れずにおきます。 レンズ補正を適用する 右側のツールパネルをするすると下に移動していき、【レンズ補正】パネルのところで手を止めます。プロファイルメニューから「色収差の除去」「プロファイル補正を使用」にチェックをいれてください。 この二つはどの写真を現像する場合も、必ずチェックするようにしています。 WBと階調を自動補正する ひとまず「WB※2」と「階調※5」の設定を「自動」にします。 Lightroomの階調補正は優秀なので、作業コストによってはここで切り上げてしまうこともあります。 コントラストと彩度は強めになるので、暗いところが真っ黒になってしまう「黒つぶれ※6」と、明るいところが真っ白になってしまう「白飛び※7」が気になる場合は、めんどくさくてもさらに調整が必要です。 色温度を下げる 「色温度※3」をそこそこ下げます。今回だと2,267にしました。 夜空に青みがかったことで、クールで近未来(?)感が増したと思います。 ここではあまり青みを強調する必要はありません。 …とはいえ、これでも一気に青くなりました。 より夜空の温度感をクールに整えています。 「色かぶり※4補正」を+5、マゼンダに寄せています。 先ほどより若干ですがクールになった気がしませんか? 蛇足ですが、夜景写真では季節感や体感温度を「色温度」と「色かぶり補正」の組み合わせで表現することが、夜景写真のコンテストなどで一種の手法となっています。 また、季節感がある被写体が写っている場合も同様です。 その辺はまた機会があれば詳しく書けるといいですね。 明るさを調整する 続いては写真の明るさを段階的に調節していきます。 全体の明るさを一挙に変えるのではなく、ざっくり二つのパートに分けて調整方針を考えます。 とても大雑把ですが、「明るいところ」と「暗いところ」で分けて調整します。 ハイライトを下げる まずは明るいところを調整して、写真のディテールを引き出します。「ハイライト」を−100にしました。 写真中央部を見てください。明るすぎて見えなくなっていたライトの軌跡が奇跡的に復活しました。 「白レベル※8」と「ハイライト※9」、「黒レベル※10」と「シャドウ※11」というのはLightroomに限らず、一般的な写真用語です。 解説としてわかりやすいな、と思ったのは以下のサイトです。 【Photoshop/Lightroom】ハイライト(シャドウ)と白レベル(黒レベル)の違い Photoshopにも同様の調整項目があるので、ついでに覚えてしまえば一挙了得ですね。 白レベルを上げる 「明るいところ」の調整をもう少し掘り下げて行います。 ハイライトを下げたことで、明るいところすべてがやや暗くなってしまいました。 車のライトの軌跡をもっと光り輝くようにしたいので、画像の「最も明るいところ」だけをさらに明るくします。 「白レベル」を34にしました。若干ではありますが、ハイライトを下げただけの写真と比べて、メリハリがついたと思います。 「明るいところ」の調整は一旦これで終わりです。 続いては、「暗いところ」を調整していきます。 黒レベルを下げる 今回はシャドウの調整はせずに「黒レベル」を-64にしました。 夜空や空の色を暗くすることで、明るいところが写真の中に浮かび上がるようにしています。 次の連載では、ディテールや色味の調整を行っていきます。 連載一覧 Lightroom Classicで写真をシネマ風に演出する(1) Lightroom Classicで写真をシネマ風に演出する(1) Lightroom Classicで写真をシネマ風に演出する(2) Lightroom Classicで写真をシネマ風に演出する(3) Lightroom Classicで写真をシネマ風に演出する(4) --> 補足:用語集 カラーグレーディング(カラーコレクション) もともとは映像作品の世界で使われている用語です。 写真の色味を調整する技法のことです。 カラーグレーディングとカラーコレクションを同義だと捉える人もいれば、それぞれ別の技法だと捉えている人もいます。 WB ホワイトバランスの略です。 LightroomやPhotoShopなどの画像編集ソフトに搭載されている機能です。 今回は青みのコントロールとして使っていますが、本来は白い被写体を白く見せるための機能です。 ホワイトバランスって何だろう? | オリンパス 色温度 WBの調整に使う機能の一つで、太陽光や白熱電球など、光源の色が持つ心象温度を数値化したもののことです。ケルビン(K)という単位で表します。 色温度が低いほど暖色系(赤・黄)の色で、高いほど寒色系(青)の色を持っているという考え方です。 カメラや画像編集ソフトの場合は、色温度を指定するとWBの調整機能で光源の色味を打ち消すよう、自動的に色温度の補正をかけます。 例えば、低い色温度を指定した場合、暖色を打ち消すために寒色系の色味に寄せます。一方、高い色温度を指定すると、寒色を打ち消すために暖色系の色味に寄せます。 ホワイトバランス・色温度(ケルビン)が分かるともっと写真が楽しくなるよ! 色かぶり WBの調整に使う機能の一つで、写真全体に特定の色味がかかった状態のことです。 色かぶりは、カメラの設定や光源の状態、撮影時間帯などの要因によって発生します。 赤っぽく見える状態を赤かぶり、青(緑)っぽく見える状態を青かぶりと言うようです。 階調 色や明るさの濃淡の幅を段階数で示したものです。階調の数が大きいほど滑らかで精細な画像になります。 例えば、モノクロ画像は2階調です。JPEGファイルでは、RGBそれぞれ8ビット階調の256階調で表現されます。 黒つぶれ 写真の一部が暗すぎて真っ黒になってしまい、被写体のディテール(輪郭)や色味などが失われてしまう現象です。写真の明るさを下げたり、夜景や黒い服を着た人を撮影すると起きやすいです。 肉眼では髪の毛の流れや服の細かなテクスチャがわかるのに、写真ではただ真っ黒でわからない…というときはその部分が黒飛びしています。 黒つぶれとは?しっかり露光して真っ黒な写真を防ごう! - ログカメラ 白飛び 写真の一部が明るすぎて真っ白になってしまい、被写体のディテール(輪郭)や色味などが失われてしまう現象です。写真の明るさを上げたり、雲や白い服の人を撮ったときに起きやすいです。 肉眼では雲の輪郭や服の細かな質感がわかるのに、写真ではただ真っ白でわからない…というときはその部分が白飛びしています。 白飛びとは?写真が明るくなりすぎるときの原因と対処方! - ログカメラ 白レベル 画像の最も明るいところです。 ハイライト 画像の明るいところ全体です。 黒レベル 画像の最も暗いところです。 シャドウ 画像の暗いところ全体です。 ...

会社紹介・その他
2021年2月10日

ミロク情報サービス(MJS)との資本業務提携の背景とこれから 中小企業にとって「やさしいDX」こそが日本の未来。誰も取り残さないという決意の裏側

今回の取材では、ITmediaマーケティングさんの鋭い質問と展開により、これまでにはないミロク情報サービス(MJS)との資本業務提携の背景とこれからについて深く語ることができました。 当社はこれまでに多くの企業の〝DIGITAL″を支援してきました。創業から20年に渡ってその歴史を振り返ると、〝DIGITAL″という言葉は、ここ数年こそよく聞くワードの一つですが、10年以上前はほとんど脚光を浴びていなかったように感じます。それよりも変化を遂げてきたのは、実は私たちの〝価値観″そのものではないかと感じます。もちろん私たちを取り巻く生活環境は〝DIGITAL″によって大きく変わり便利になったこともあります。しかし見方を変えれば、それは私たち人間の〝価値観″そのものの変化がテクノロジーの進歩につながったとも言えるのではないでしょうか。 ここ1~2年はコロナショックとも言うべき状況によって、にわかに「DX(デジタルトランスフォーメーション)」が世の中のトレンドになっていますが、その意味について本質的に理解できているかどうかは疑問が残ります。常にあるのは、「DIGITALが主役になっていないか?」という疑問です。トライベックは創業当初から、「デジタルは道具である、使いこなすのは人であり、利益を享受するのも人である。だからこそ徹底的に人起点でのマーケティングが基本だ」という考えを持っています。だからこそ、徹底的に「ひとにやさしい」デジタルマーケティングは何かを追求してきました。今の世の中をみると、社会全体に〝DIGITAL″を軸にしすぎていて、「デジタルの進化に合わせるべきは人」というデジタル弱者を生む構図になってきてはいないかと危惧しています。 このデジタル弱者が生まれている構造は、産業においては特に顕著です。大企業と中小企業の間にある「デジタルへの取り組み/DXへの取り組み」には大きなギャップがあります。その差は広まるばかりで、置いてきぼりの中小企業は成す術を持たず、相談できる相手もいない状況です。こんな状況が良いはずがありません。日本の経済を、日本の未来を担っているのは、国内99.7%の中小企業です。彼らの元気を取り戻す。そのために、「ひとにやさしいDX」を今こそ追求しなければなりません。 関連リンク ITmedia「トライベック後藤洋氏に聞く ミロク情報サービスとの資本業務提携の背景とこれから」 トライベック、株式会社ミロク情報サービスと資本業務提携-ウィズコロナ時代の新しいDXプラットフォーム構想に着手-...

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

2021年 社長年頭挨拶

新年あけましておめでとうございます。 2020年。誰もが期待に胸を膨らませスタートした1年でしたが、その期待は新型コロナウィルスという未知のウィルスとの闘いに明け暮れる1年となりました。当社にとっても、3月に開催予定だった自社の大型イベントの中止を余儀なくされ、さまざまなプロモーションの制限や自粛の煽りを受け、目標の進捗は芳しくはありませんでした。 しかしそうした状況だからこそ、下を向かず前向きに「会社の未来」を考える機会と捉えようと、あえて多くのチャレンジをしてきました。新たな時代の新しい働き方として、「トライベック・ニューノーマル」を策定し、すぐに実践してきました。現在でも社員のおよそ8~9割がテレワークでの業務を実現させており、健康不安を抱える社会情勢においてひとつの「働き方の解」を導けたのではないかと信じています。 一方、業績はというと、苦しい環境の中で社員が一丸となり尽力した結果、19期連続の黒字を達成することができました。こうした状況の中で、社員一人ひとりが自ら考え、行動し、そして何より成長してくれたことの証ではないかと思っています。 さらに9月にはトライベック・ストラテジー、ブランド戦略研究所、プロフェッショナルサービスの3社を統合し、「トライベック株式会社 - CX Consulting Partner -」として新たにスタートさせました。 Welcome Changes変化を受け入れ、変化を楽しみ、変化し続ける 私たちが節目の20年目に掲げているビジョンです。変わるのは今だ。この激動の時代において、企業が目の前の大きな波にのまれることなく、乗るために前に進めていくこと。それが今求められていると感じています。 DIGITAL INNOVATION for the future デジタルの力で日本社会を大きく変えるイノベーションを起こす。それは私にとっての悲願でもあり、会社が目指す未来の社会でもあります。20年という節目の年にあって、これまでにない大きな決断をしました。昨年末リリースした通り、ミロク情報サービス(以下、MJS)と資本業務提携し、MJSグループとしてスタートを切ります。 ひとにやさしく、つなぐデジタルを 日本経済・地域経済が危機に瀕している今、私たちは改めてこの企業理念に込めた思いの本質を考えます。デジタルは魔法ではありません。使い方を誤れば、それだけ人のストレスになることもあります。人の気持ちを第一に考え、人のために、人が使いやすい、やさしいものが今の日本に必要です。今こそ、この理念を実現するときだと思っています。 私たちは前に進むべく大きな一歩を踏み出します。まだまだ詳細な内容はお伝えできませんが、これからの社会に必要不可欠な存在になれるよう、新たな「統合型DXプラットフォーム」を推進していきたいと思います。2021年のMJS×トライベックにご期待ください! トライベック株式会社 ...

プロダクション
2020年12月14日

Headless Chrome + ImageMagickで画面キャプチャをまとめてPDF化する

はじめに Webシステムやサイトなどの作成や修正時には、Webページのスクリーンショットを、PDFにまとめることが多々あります。 1ページ、2ページなら良いのですが、ページ数が増えれば増えるほど、なかなか時間がかかります。 そこで今回は、Webページのスクリーンショットの取得から、PDFへまとめる作業を、 自動化できるツールを作成してみました。 利用したもの ・Headless Chrome → バックグラウンドで動作する、GUI画面を持たないChrome。コマンドラインから利用します。 今回は自動化を行うため、ブラウザをコマンドで操作するために利用しました。 ・Node.js → JavaScript実行環境の1つ。今回はHeadless Chromeを操作するために利用しました。 ・ImageMagick → コマンドにて画像を操作するソフトウェア。今回は取得したPNGデータをPDFにまとめるために利用しました。 Node.jsのライブラリ・モジュール ・Puppeteer →Headless Chromeの操作に利用しました。 ・fs →Node.jsにてファイルを扱うためのモジュール。Node.jsに標準で備えられています。 今回は別ファイルにURLリストを作成し、読み込ませるために利用しました。 ・readline →Node.jsにてファイルを1行ずつ読み込むためのモジュール。Node.jsに標準で備えられています。 今回はURLリストから、URLを一行ずつ取得するために利用しました。 環境 ・Windows 10 ・Node.js v12.14.1 ・ImageMagick 7.0.9 全体の流れ スクリーンショットを取得したいURLリストを作成。 Node.jsから、URLリストを読み込み。Headless Chromeより、スクリーンショットを取得、保存。 取得したスクリーンショットをImageMagickにてPDFにまとめる。 ディレクトリ構成 ├─getScreenShot.js → Node.jsの処理記述ファイル ├─makePDF.bat   → 全体の処理記述バッチ ├─png       → 取得したスクリーンショットを保存するディレクトリ └─url.txt      → 取得したいスクリーンショットのURLを記載したリスト コード getScreenShot.js const puppeteer = require('puppeteer'); let fs = require('fs'); let readline = require('readline'); // URLリストに記載した順番にPDFのスクリーンショットが並ぶよう、番号を振る。 let count = 1; // URLリストよりURLの読込 let stream = fs.createReadStream('./url.txt', 'utf8'); let reader = readline.createInterface({ input: stream }); reader.on('line', (data) => { asyncCall(data, count); count++; }); async function asyncCall(url, count) { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); // Basic認証の設定 // await page.authenticate({ username: 'ID', password: 'PassWord' }); // 画面サイズの設定今回は1290×800に設定 await page.setViewport({ width: 1290, height: 800 }); // 取得したURLへ遷移 await page.goto(url); // 画面表示待ち await page.waitForNavigation({ waitUntil: ['load', 'networkidle2'] }) .catch(e => console.log('timeout exceed. proceed to next operation')); // フルサイズのスクリーンショットを取得 await page.screenshot({ path: './png/' + count + '.png', fullPage: true }); console.log('save screenshot: ' + url); // ブラウザタスクの終了 await browser.close(); }; *Basic認証がかかったテストページなどの場合は、Basic認証の記述を追記 makePDF.bat node getScreenShot.js cd png rem 余白ができることがあるため、トリミング magick mogrify *.png -trim *.png magick *.png output.pdf url.txt https://www.tribeck.jp/ https://www.tribeck.jp/column/tribeck/topics/20201110/ https://www.tribeck.jp/column/tribeck/topics/20201007/index.html アウトプット pngディレクトリ内容 output.pdf内容 まとめ 以上で、必要なURLのリストがあれば、ワンクリックで資料を作成することができました。 補足ですが、Puppeteerでは画面操作なども行えますので、 ログインが必要なサイトでも、カスタマイズすると、キャプチャが取得できるようになりますよ。 また、今回は簡単に作業できるようURLをリストにまとめる形にしてみましたが、 場合によってはメモリーリークなどで落ちてしまうので、そのあたりも適宜カスタマイズすると使いやすくなるかと思います。...

社内イベント紹介
2020年12月7日

「登山部」第4回:陣馬山レポート!

トライベック「登山部」は、昨年2019年初夏に初の縦走にチャレンジしました。その後、予定していた2019年秋は悪天候で、そして本年2020年の春は新型コロナウイルスでの緊急事態宣言の発令下ということで、二度の計画中止となっておりました。 現在、弊社は「トライベック・ニューノーマル」という働き方のもと、基本的には在宅で勤務しています。 メールやチャット、オンラインMTGでのやりとりが主な中、自粛生活から少しずつ経済活動を戻していこうという流れもあり、弊社のクラブ活動も感染症予防対策を立てることを条件として、活動再開いたしました。 春に入社した新卒社員たちは、入社式もオンラインでの開催で、所属が異なる社員との交流の機会がない中、部活動の再開を通知したところ、在宅での運動不足解消やリアルなコミュニケーションに飢えていたメンバーが名乗りを上げてくれたので、今回は小規模ではありますが、2020年11月14日(土)に、やっと4回目の活動をおこなうことができました! 準備は万端。いざ出発 今回は新卒社員2名、登山未経験者の参加があったため、比較的初心者向けの設定をし、開催3週間前に事前の現地下見も実施して、神奈川県と東京都との都県境にそびえる陣馬山(標高855m)を目的地としました。 快晴の土曜日、JR中央線の藤野駅に9時頃に集合。当日、残念ながら体調不良での欠席が1名おりましたが、残り5名は遅刻もなく、予定どおりのスタートです。この時期、紅葉の見ごろのため、登山口へのバス停には長蛇の列ができていましたが、しばらく並んで臨時バスで無事に登山口までたどり着けました。 陣馬山登山口にて。晴れて陽がまぶしいほど ここまで公共交通機関内ではマスクを着用しておりましたが、登山開始からはマスクを外して、山中のきれいな空気を吸いながら登ります。今回の往路は一ノ尾尾根コースです。 舗装された坂道を登り始めてすぐ、色づいた木々が出迎えてくれて、歓声が上がりました。 雲一つない青空に映える紅葉 登山口から山頂への予定は休憩を含めて2時間を見込んでおり、30分おきくらいに休憩しようね、と話していたのですが、体内時計がおかしい先輩が1名いて、なぜか15分おきにティータイム(笑)の要望が。新卒社員たちも先輩の意外な一面を知って、イメージが変わりました!と会話も砕けてきました。 学生時代は何をしていたのか、最近では誰とどんな仕事をしているのか、この花の名前何だっけ?など、山道を登りながらたくさん話しました。マスクなしでおいしい空気の中では、息切れしつつも楽しい会話が続きます。 しゃべって笑ったり、どんぐりを拾ったり 舗装路を抜けて本格的な山道に入ると、周りの景色とともに、足元が岩場になったり、広い落ち葉の絨毯のような道になったり、本格的に登山という感じになります。 この日は何組かの登山客と抜きつ抜かれつしたり、下山する人とすれ違ったりしましたが、お互いに山道では譲り合って挨拶やお礼の言葉が飛び交いました。コミュニケーションって楽しい!と思った瞬間です。 急斜面は息を切らせて登ったり、平坦な場所では会話が盛り上がったり この日は都心では20度超まで暖かくなった日で、山中でも歩いているとかなり暑く感じました。水分補給もしっかりしてもらいます。上着を脱いで汗をかきすぎないよう調節していると、季節が逆行して半袖になるメンバーがいたり、汗だくで首にタオルをかけたりと、いろいろです。 水分補給とリンゴを食べて休憩。木陰が気持ちいい 登り始めて一時間を過ぎると、足どりも重くなってきます。「明日は確実に筋肉痛だね」「明日くればいいほうだよ…」など話しつつ、15分おきに休憩を求める先輩を冷たくあしらうなど、相互理解はすでにバッチリ!? 初めての登山組。同期とのリアルコミュニケーションはやっぱり楽しみ 後半では、新卒メンバーに先頭を進んでもらいましたが、びっくりするほど登るのが早く、先輩たちは必死でついていきました。これが若さってやつなのか、登山趣味のご家族のDNAなのでしょうか? 山頂間近のススキ野と紅葉林を抜ける。雲ひとつない目的地がすぐそこ 山頂らしき木々の切れ間が見えて、あと少し!と何度も思ってはまだ丸太の階段が続く、という苦難を経て、見晴らしの良い場所に出ると周囲の山々も紅葉で色づいているのが眺められました。ススキの原っぱを過ぎた先が本当に山頂(の茶屋)です。 山頂へ到着!…したらまずは 陣馬山の山頂標を確認する前に、まずはとにかく座って水分補給をして、なにより昼食を食べたい!ということで、今回は一ノ尾尾根コースを登ってすぐにある「清水(きよみず)茶屋」さんにお邪魔しました。 ここの名物は「陣馬うどん・そば」なのですが、この日は紅葉最盛期のお昼時で混雑していたため、手早く提供されるということで「けんちん汁」をいただくことに。各自持参したおにぎりやカップラーメンとともに食べた具だくさんで熱々のけんちん汁は、汗をかいた体にしみわたりました…。 (茶屋で追加の飲み物も購入・補充できてひと安心のメンバーも) 山頂の茶屋でのランチ。眺めも最高! 今回も山頂での初カップラーメンのメンバーがいましたが、何故かオフィスなどで食べるよりおいしく感じる不思議。食後のデザートまで食べて、満足した後はやっと山頂を踏みに行きます。 雲ひとつない360度のパノラマ。陣馬山のシンボル・白馬像と 標高855mの山頂で白馬像と山頂標の前で記念写真を撮りました。登山部のボードは、トライベックの新ロゴにちゃんと差し替え済みです。 陣馬山頂にはトイレも設置されており、道標には台風での通行止めのお知らせなども掲出されていました。山の保全や登山道・施設維持、登山客への注意など、大変ありがたく、感謝して使用しなければいけない、と考えさせられます。もちろん、持参した飲食物や購入したペットボトルなども、全部持ち帰ります。 集合写真撮影後は、真っ赤に色づいた紅葉を間近に見下ろしたり、各自がスマホで撮影したり、景色を楽しみました。 どっちを見ても絶景!この角度だと白馬っぽく見える 山頂での紅葉狩り 下山は慎重に 景色を満喫した後は安全に山を下ります。下山はコースを変えて栃谷尾根を選択。下山道へ入ってすぐに、富士山をススキ野越しに眺めることができました。 ススキ越しの富士山 下山時は呼吸が楽ですが、足腰への負担は大きく、また足元の落ち葉で足元が滑りやすくなっているので、慎重に下ります。 登りの半分くらいの時間で下る中でも、呼吸が楽な分会話は弾みました。 お参りをしたり、無人販売を見てみたり 里山まで下りてくると、山中とはまた異なった景色や楽しみもあります。 下山道の途中に、温泉への分かれ道がありましたが、今回は混雑が予想されるため断念。約一名、かなり温泉にこだわっておりましたが、今回は多数決であきらめてもらいました。 最後は里山から舗装路をひたすら下り、スタート地点の登山口まで無事に戻ることができました。しかし、あいにくバスが来ない時間だったため、駅まで約2kmを歩いて戻ることに。 藤野駅に9時に集合してから約7時間、よく歩きました! もちろん今回も恒例の… 今回は恒例の温泉は無しになりましたが、全員で打ち上げは開催。高尾駅まで電車で移動し、16時半からの宴会となりました!登山靴を脱いで座れたときは、もう二度と立ちたくないくらいでした…。 無事の下山を祝って 第4回目も全員怪我がなく、無事に帰宅することができました。感染症予防の自粛ムードでの運動不足を、一か月分くらい補った気がした活動となり、また、会社で集まることも難しい中、部署や年代を超えて交流できたこの機会は、とても楽しいものでした。 登山部と言いつつ、登らなくても「山」に絡めたさまざまな活動の案や希望も聞けたので、また皆で楽しめるイベントを考えようと思います。 トライベック「登山部」の活動は続く!?...

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

内定者WELCOME CEREMONY2020

2020年11月16日にオンラインにて「内定者WELCOME CEREMONY(内定式)」を開催しました。 例年の内定式は赤坂オフィスに内定者をお招きして、開催をしていました。今年はコロナウイルスの影響で赤坂オフィスでの開催を断念せざるを得ない状況でした。 最近、新卒採用は“一括採用”から“通年採用”にシフトチェンジを図る企業が出始め、併せて内定式を開催しない企業も少しずつ出始めてきています。しかし、内定式は内定者にとって、一生に一度しかないイベントです。その貴重な機会をぜひ経験してほしいと私自身思い、どうすれば満足のいくイベントが開催できるか考えていました。 当社は新卒採用をはじめて7年目となり、内定式は社員にとって、楽しみにしているイベントのひとつです。また前述の通り内定者にとって内定式は一生で一度しかないイベントです。そのため内定者、社員どちらにとっても記憶に残るイベントにしたいと思い、今年は“全社員参加型のオンラインイベント”を企画しました。 内定者WELCOME CEREMONY 「内定者WELCOME CEREMONY」は後藤社長からのメッセージで開幕し、神妙な面持ちで内定者は後藤社長のメッセージを聞いていました。 つづいて、内定者ひとりひとりから自己紹介をしてもらいました。自己紹介は当社に決めた理由など発表してもらい、その発表にはひとりひとりの個性が出ていて、それぞれの良さを見ることが出来ました。 当社に決めた理由で多かったのが、 ・コーポレートスローガン「ひとにやさしく、つなぐデジタルを」に強く共感 ・社員のひとのよさ でした。その中の“ひとのよさ”は今回のイベントで感じてもらえたのではと思います。それは、ひとりひとり自己紹介が終わった後、チャットで「おめでとう!」がたくさん寄せられ、連続で寄せられるチャットは圧巻の光景でした! きっと内定者の皆様も喜んでくれたのではと思います。 WELCOME CEREMONY風景 内定者から寄せられた感想は、 4月に向けて不安な点もありましたが、トライベックの皆さんのお顔を見ることができ、不安が和らぎました! また後藤社長のお話を通じて、社会人になっていくという自覚も増し、身が引き締まりました。 本日はとても楽しく貴重なお時間をいただき、ありがとうございました! 本日はお忙しい中、内定式を開催していただきましてありがとうございました!オフラインでお会いできます事心より楽しみにしています。今後もよろしくお願い致します。 お忙しい中、このような機会を作っていただき、誠にありがとうございました。 私が想像していた以上の社員の方々に参加していただき、少し緊張しましたが、とても暖かく歓迎していただいていると感じました。 オンラインではありますが、社員の方々のコメントや他の内定者の雰囲気を見て、早くお会いしたいという気持ちが込み上げてきました。 自己紹介では緊張しましたが、温かく聞いて下さり嬉しかったです。 本日はお忙しい中、「内定者WELCOME CEREMONY」を開催していただき、誠にありがとうございました。後藤社長のお話の中にあったように、今の時間を大切にしながら、来年の入社に向けて勉強に励み準備をしていきたいと強く思いました。 今後ともご指導ご鞭撻の程よろしくお願い申し上げます。 想像以上にたくさんの社員の方が参加されていて驚きましたが、お祝いのメッセージなど、とても嬉しかったです。また、同期の顔もみることができて良かったです。イベントを開催して頂き、本当にありがとうございました。 と、喜びや驚き、感謝の声を聞けて、開催して良かったと思います。また、内定者の記憶に残るイベントに出来たのではと感じています。 総括として、内定式をオンラインで開催することは初めての試みでしたが、デジタルでひとに思いを届けられることは可能であると感じました。それは、当社で大切にしている「ひとの気持ちに寄り添う」ことが思いを届けるために一番大切だと思いました。 来春からいっしょに働けることを心から楽しみにしております。...

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

全国20万の学生が選ぶリーダーズアワード2021年に選出。激動の今だからこそ伝えたい。“ひと”が主役のデジタル社会で輝ける人材へ。

リーダーズアワードとは、学生が憧れる経営者を決めるアワードで50名の経営者が選出されています。私もそのうちの1人に選んでいただきました。そのリーダーズアワードについてこのように紹介されていますので引用します。 人生を大きく左右する就職活動。 何を目指し、どんな大人になりたいのか。 大きな岐路に立つあなたに、一つのヒントになるべく、50人の経営者の言葉を集めました。 目まぐるしく変化していく世の中においてそれぞれの知識や経験をもとに素早い判断で会社を経営し、日本を牽引している人のそれぞれの熱い思いを感じてください。 そして、そこから「新しい気づき」「将来の目標」「なりたい大人」に繋がる〝あこがれる経営者″を決定するアワードを開催します。 このアワードを通じて得た人生のヒントをパワーに変え、是非、これからのあなたの原動力にしてください。 本アワードは冊子として、全国の大学に配布され20万人の学生が見ることになります。さらに冊子の表紙には、50名の経営者の中から選出された14名が代表で掲載されており、私もご一緒させていただきました。 今回このような貴重な機会を得て、未来ある学生に向けたメッセージをということで取材していただいたわけですが、その際に感じたことについてお話ししたいと思います。 世界はウィズコロナの真っ只中にあります。これから冬を迎えようとする中で、欧州では爆発的な第3波が来ており、日本でも増加傾向にある状況です。このコロナウィルスという未曽有の世界危機がもたらしたものに急速なデジタル化(DX)が挙げられるでしょう。非対面・非接触コミュニケーションを実現するデジタル化によって、ビジネスのこれまでの常識が変わり、産業構造の変化すら起きている実情です。今まで安泰だと思っていた大企業ですらその禍に飲みこまれ、事業の転換を余儀なくされています。 このような状況において、学生の皆さんは大きな不安と悩みを抱えていることでしょう。誰も予想できない世の中にあっという間に変わったわけですから。就職活動という人生の転機を迎え、これからの人生を考えなくてはならない今、自分のこれまで学んできたことは正しかったのか?これからどの業界にいけば安心なのか?私は何のために就職するのか?そんな思いに苛まれている日々かもしれません。 しかしながら、これは学生に限ったことではありません。すでに仕事に就いている社会人すべての人に言えることではないでしょうか。これまでの常識が通じない世の中において、新たな未来に向けて、多くの社会人がスタート地点に立っているといっても過言ではありません。 急速なデジタル化によって企業や政府、ひいては社会のDXが進んでいきます。未来の話だと思っていたAIやロボティクスによって働き手が人からデジタルに変わっていくことが予想されていましたが、その現実を垣間見ています。私たち“ひと”にとって、多くの仕事が奪われることになるかもしれません。しかし、それだけで社会のピースが埋まるか?それは否です。“ひと”にとっての快適な社会、やさしい世界、温かいコミュニケーションは、“ひと”の発想や考えによって生まれるものだからです。 だからこそ、私はあえて今の学生に伝えたいのです。今、こうした不確実な時代だからこそ、なぜ就職するのか?働く意味はどこにあるのか?そのひとつの拠り所として「社会に必要とされる人になってほしい」と送りました。簡単なことではありません。社会に必要とされるためには、社会を俯瞰的にみる目が必要です。社会にあって不便なもの、困っている人、さらに便利にできる考え、そんなさまざまな社会に足りないピースが見えてくるはずです。そしてそれを知るために何より必要となるのは、“ひと”としてのやさしさです。“ひと”にやさしい社会の実現。デジタル化がもたらすべきは、そんな社会だと思うのです。デジタルが主役ではなく、“ひと”が主役のデジタル社会とは何か。改めてそれを考える時期かもしれません。 関連リンク LEADERS' AWARD ~20万人の学生があこがれる経営者アワード~...

プロダクション
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年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/ 関連リンク ランキング概要 ランキング一覧...

お問い合わせ

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

関連コンテンツ