皆さんこんにちは！UI開発者の増田です。4月21日（水）に開催されたテックラウンジVol.92「テックラウンジアワード～2020年の振り返り～」の様子をご紹介します。

2020年のテックラウンジ総まとめ！「テックラウンジアワード」

1年を通して開催している「ミツエーテックラウンジ」では、毎回さまざまなテーマで多くの方にお話をしていただいています。今回の「テックラウンジアワード」は、テックラウンジ運営委員会が主催するイベントの中で、もっとも輝いていた方を表彰するアワードです。2020年1月から12月までの期間で開催したイベントを対象とし、日頃より一緒にイベントを盛り上げてくれている方々へ、感謝の気持ちを込めて開催しました！

アワード対象イベント

今回エントリーされたイベントは以下です。リンク先はテックラウンジBlogの各イベントレポートとなっています。それぞれのイベント詳細についてはぜひレポートをご覧ください。

テックラウンジ

臨時イベント

アワード発表と表彰

アワードのラインナップは以下です：

また、受賞された方にはささやかながら記念品をお送りしました。

LT特別版

最後に受賞された3名にLTをしていただきました。

どんなことが起きても動じないそんなメンタルを持つための考え方

1人目は「盛り上がったで賞」を受賞されたHさん。
いろいろやることがあり、焦って頭が真っ白になってしまう...そんなときにどう気持ちを切り替えればよいか、どう考えればよいかをテーマにお話しいただきました。

忙しい人のためのキレイなスライドの作り方～明日使えるパーツ10選～

2人目は「たくさん登壇したで賞」を受賞されたMさん。
お客様への提案時など、使用する機会の多い発表スライド。そんなスライドを見やすくきれいにする方法について、実例を交えながらお話しいただきました。

「Cloudflare Workers」ことはじめ

3人目は「テックラウンジおつかれさまでしたで賞」を受賞されたFさん。
サーバレスアプリケーションプラットフォーム「Cloudflare Workers」を使い始めるにあたっての、メリットやデメリットをわかりやすくお話しいただきました。

まとめ

いかがでしたでしょうか。今年はテックラウンジをオンライン形式で開催したりと、運営としても変化の多い1年でした。しかし、ご参加いただいたスタッフのおかげで変わらず開催することができました。また、技術的な面以外にも、気持ちの切り替え方や考え方などを知ることができ、とてもためになりました。

次回のテックラウンジもお楽しみに！

皆さんこんにちは！テックラウンジ運営委員会の西山です。 今回は、1月27日（水）に開催されたテックラウンジVol.91の様子をご紹介します。 今月は「今日から使える？将来きっと来る？Adobe XD使いこなし術2021」と題しまして、さまざまな職種のスタッフに、Adobe XDをどのように活用しているのかについてお話を伺いました。

タイムテーブル

当日は以下の3本立てでLT（ライトニングトーク）を進行しました。

1. Adobe XD Extention for VS Codeで連携と開発をスムーズに！
2. 楽したい。
3. 5分で振り返る2020年のAdobeXD

それでは早速、当日の様子をご覧いただきましょう！

Adobe XD Extention for VS Codeで連携と開発をスムーズに！

最初の登壇者は設計チームのHさん。

XDとVS Codeが連携した実装をデモンストレーションを交えながら分かりやすく解説してくださいました。デモンストレーションではデザインに修正が発生したと仮定して、実際にHTML修正の流れを見せていただきました。XDで作成したデザインのパーツをコンポーネントやアセットとして登録しておくことで、VS Code側の作業エリアにもパーツが表示され、そのパーツごとにモジュールを設計することができるそう。設計時にモジュールをスニペット登録しておく作業が必要になりますが、それによって運用時の不可も軽減できるのではとお話しされていました。

楽したい。

次の登壇者はディレクターのAさん。

効率化のために実行していることをお話しいただきました。それは「プラグインを積極的に利用する」「社内で作成しているワイヤーフレーム用のモジュールを流用する」「機能は自分が使いやすいものに絞りXDを自分用にカスタマイズする」の3つだそうです。さらに、XDをより深く知るためには、とにかくツールを触ってみること、XDに知見のある人のSNSなどをチェックする、勉強会に参加するなど、日々の積み重ねが大切ですとお話しされていました。

5分で振り返る2020年のAdobeXD

最後の登壇者はアートディレクターのAさん。

2020年に行われたXDの変更点（アップデートは10回、機能追加は36件）の中から、特にAさんがすごいと感じた3つをピックアップして紹介いただきました。

1つ目は「高さを自動調整」機能で、原稿の長さがバラバラでも自動で高さを合わせることができ、デザインだけでなくワイヤーフレームの作成にも役立つとのこと。 2つ目は「複数のフロー」という、ABテストやぺージへの流入経路が複数あった場合の検討に利用できる機能。そして、 3つ目は「3D変形」機能で、自動アニメーションとの相性がよく、表現の幅が広がるのではないかと考えているそうです。

また、「フューチャーリクエスト」という掲示板でまとめられた、2021年に実装されると思われる機能も併せてご紹介いただきました。

1. ビデオやGIFアニメーションを取り入れたデザインが作成可能になる
2. アニメーション機能の拡張　
3. インターフェースにダークモードを追加

最後に、今後のアップデートにも期待ができる反面、機能が次々に増えていくため、まだXDに触れていない方は早く始めることをおすすめしますと締めくくりました。

まとめ

いかがでしたでしょうか。今回はXDの有用性を感じられ、今後のXDの活用幅を広げることができる有意義な時間になりました！

次回は2021年4月にテックラウンジアワードを開催いたします。お楽しみに！

皆さんこんにちは！テックラウンジ運営委員会の高橋です。

11月18日（水）に開催されたテックラウンジVol.90の様子をご紹介します。今年3月頃から、リモートワークが社会的に定着し、当社でも取り入れております。そこで、今回は「目指せ作業効率アップ↑↑ 突撃！となりのリモートワーク大特集」と題しまして、リモートワーク移行後、働き方にどのような変化があったのか、またリモートワーク時に行っている工夫などについてスタッフにお話を伺いました。

最初の登壇者は品質管理部のHさん。

リモートワーク移行後、部内でのルールの変化や業務中に心掛けていることについてお話しいただきました。ルールに関しては、リモートワーク前後で大きな変更なく品質管理の対応ができているとのこと。その一方で、対面で話す機会が減ったため、社内のコミュニケーションツール（Microsoft Teams）などを使用し、ささいなことでも部内で共有することを心掛けるようになったそうです。リモートワーク導入時は不安もあったが、こまめな共有と連携のおかげで従来どおりのパフォーマンスで業務を行えており、引き続き維持していきたいとお話しされていました。

リモートぴえんを乗り切ったライフハック教えます（開発者編）

続いての登壇者はUI開発者のYさん。

リモートワークによって発生した2つの不便をどのように解決したのかをお話しいただきました。

1つ目の不便：社内に設置されているペアプログラミングPC（同じ画面を見ながら制作作業を行うことができるPC）が利用できなくなった。
業務の中でペアプログラミングPCを使用し、開発者同士で意見交換をすることがあるそうなのですが、それが在宅のためできなくなってしまったとのこと。解決策として、リモート環境でも複数⼈と共同作業を行うことができる拡張ツール「Visual Studio Live Share」を導入したそうです。これを導入したことにより、リモート環境でも接続のラグなく、ペアプログラミングPCと同環境で作業を行えるようになったそうです。

2つ目の不便：顔を合わせる機会が減り、テキストベースでのコミュニケーションが増えた。
テキストベースでのコミュニケーションになったことにより、そのつもりがなくても文章の伝え方によって相手に不快感を与えてしまう可能性があるため、文章に気を遣うことが増えたとのこと。この問題に対しては、大なり小なりを使った「ぴえん顔文字（＞＜）」を作成し、文章を柔らかくすることを意識しているそうです。句点「。」を「＞＜」にするだけでだいぶ印象が変わることと、簡単に打つことができるのでちょっとした調味料感覚で打つことができるところもポイントだそうです。

「オンライン会議映え」させる方法

最後の登壇者はアクセシビリティ部のMさん。

オンライン会議（Zoom使用時）での印象を左右する、カメラ写りをよくする方法についてお話しいただきました。 オンライン会議でありがちな以下2つの悩みについて、その解決法を伝授してくれました。

①角度や距離感がいまいちである
Webカメラと自分の距離をどのくらい空けるかを考えることがよいとのこと。PCの上部にWebカメラを設置した際に、角度や距離感がいまいちであると感じる際は、距離が近すぎることが考えられるため、少しカメラから距離をとってみるとよいとのことでした。

②自分の映っているビデオ映像が暗い、色温度が悪い
新しいバージョンでないと外見補正を行える機能が備わっていないため、まずはZoomのバージョンを5.2以上にアップデートするとよいそうです。アップデート後、「設定」から「ビデオ」を選択し、「外見を補正する」「低照度に対して調整」の2つのチェックボックスにチェック後、サイドバーから明るさや色温度を調整できるとのことでした。一度調整してしまえばその後の会議でも同じ設定が引き継がれるため、オンライン会議の前に、ぜひ一度確認してみてほしいそうです。

まとめ

いかがでしたでしょうか。

リモートワーク移行後も従来のパフォーマンスを発揮し続けているという、品質管理部の盤石な組織体制が垣間見られたり、すぐにでも実践できるリモートワーク時の工夫を知ることができ、とてもためになる回でした！皆さんもぜひ、活用してみてくださいね＞＜

次回のテックラウンジもお楽しみに！

皆さんこんにちは！テックラウンジ運営委員会の古川です。

今回は、10月28日（水）に開催された第5回デザインスプリントの様子をご紹介します。

デザインスプリントとは？

MLCデザインスプリントとは、チームに分かれてライブデザイニングを行う様子を、実況解説を交えつつ観覧するイベントです。

2人1組の全3チームに分かれ、制限時間内までにお題に沿ったデザイン制作を行います。

昨年、一昨年の開催の様子は、以下のレポートをご覧ください。

• 第4回デザインスプリント 開催レポート（10月9日開催）
• 第3回デザインスプリント 開催レポート（10月24日開催）

5回目を迎える今年は例年のイベントをアップグレードし、バナー制作の案件を行うという設定で、UIデザイナーとディレクターのペアで入稿からバナー制作までを実演いただきました。

今年のお題は「ハロウィンイベントへ向けた新製品発表に伴うバナー作成」です。以下の画像のような新商品（かぼちゃ味の飲料水）の発売に伴うバナーの作成を、架空のお客さまからメールで依頼されたという設定で行いました。

お客さまからは素材提供のほかに、バナーサイズ、キャッチコピー、デザインテイストのイメージなどの情報が与えられます。

この案件依頼メールをもとに、ディレクターがデザイナーに入稿するところからイベントがスタートしました。

イベントの様子

ディレクターはまず、お客さまからこれらの情報を取りまとめてコミュニケーションツールのBacklogに課題をたてます。その課題の内容をもとに、デザイナーはツールを駆使して20分間でデザインを仕上げていきます。

入稿パートは「ディレクターが普段どのように情報を整理しているか」が大きなポイントですが、3チームそれぞれ、どのように表記していくかについてもこだわりがあるようです。

それでは各チームの入稿を見てみましょう。

入稿のポイント

チームA

最初に案件の要点を書き、後に付随する備考を書くなど、情報の重要度の高いところから記載することを意識したそうです。

運営からのコメントとして、「Backlog課題概要に名前を書くところが好印象」という感想がありました。Backlogの課題概要でいきなり要件から入ると、唐突で冷たいという印象を与えてしまう可能性があるとのことで、このような些細なところにもディレクターは配慮しているんだなという知見を得られました。

チームB

最初に案件の概要を書き、後に詳細を記載していくといった、読み進めるごとに解像度を上げる構成を意識したそうです。

また、課題概要だけでは伝わらないバナーのニュアンスやイメージは、口頭でやりとりをしてデザイナーと認識を統一していったとのことでした。

課題の概要にさりげなくジャック・オ・ランタンの絵文字が使われていてつい和んでしまいました。このような遊び心も、円滑なコミュニケーションを築くためには大切なのかもしれません。

チームC

全体的には、普段案件でよく記述する項目を書きつつ、キャッチコピーやデザインのトンマナなどはデザイナーに一任する形で入稿したそうです。ポイントとしては箇条書きを意識すること、成果物の格納先を明示することの2点に気をつけたそうです。

概要部分については、担当者が代わっても案件概要が把握できる、という粒度で書くことを普段意識しているそうです。

チームの成果物

ディレクターの入稿をそれぞれ見ている間に、制限時間が終わってしまいました。

残り時間を宣言すると「も、もうちょっと時間を...」と毎年声があがるので、制限時間内でデザインをしきるのはやはりとても大変なようです。

ここで、制限時間内に完成したデザインを見ていきましょう。

チームB

デザイン中はどのように商品画像を目立たせようかなど、画像の配置や扱いにかなり悩んだとのことでした。全体的な要素の配置としては、ロゴを中心に置き、それにあわせて周囲の効果などを作成したそうです。ロゴにふんわりかかっている黄色い光彩が、怪しげな空気感を演出していますね。

チームA

バナーを目立たせるためのグラデーションが大きなポイントだそうです。また、提供素材が加工せずともそのまま使えるものが多かったので、素材を多用し世界観を構築していったとのことでした。

商品の色味と相まって、かぼちゃ飲料水のイメージが伝わりますね！ちなみにキャッチコピーにもグラデーションをかけていて、「バナーを目立たせたい」というテーマを表現しているそう。

チームC

味がとても特徴的なので、キャッチコピーと発売日に特に重点を置き、ロゴの重要度を下げた構成になっています。

ロゴをあえて小さくし、「キャッチコピー」を最大限に活かすアプローチはほかのチームとは異なっていますね。スーパーで見たときにロゴより商品のほうが目につくので、商品画像をロゴより大きくしてください、というのはディレクターのオーダーだったそうです。

最終成果物

イベント自体はここで終了となりましたが、ご参加いただいたデザイナーの皆さんに、後日特別に完成形を作成していただきました。

20分間の中で制作された成果物と見比べたときに、ブラッシュアップしたポイントを見つけてみるのもおもしろいですね。

いかがでしたでしょうか。

ディレクターとデザイナーの個々のすばらしいテクニックと、見事な連携プレイを見ることができ、こうして各々のスキルとコミュニケーションを駆使し、成果物を作り出していくのだと感心しました。特にディレクションについては、お客さまが考えているイメージを依頼文から読み取りつつ情報を整理したり、デザイナーに指示を出したりするところを見ることができ勉強になりました。

次回のテックラウンジは1月を予定しています。お楽しみに！

皆さんこんにちは。UI開発者の柴田です。

今回は、10月21日に開催されたテックラウンジVol.89の様子をご紹介します。 今月は「ディレクター・制作のすごみがあるッ！名プレイ2020」と題しまして、登壇者が日々の業務の中で、「すごいと感じた、助けられた」などの名アシストと感じたエピソードを紹介していただきました。

最初の登壇者はディレクターのIさん。

工程の手戻りを見事にリカバリーしてくれた制作スタッフのお話を紹介してくださいました。

Webサイト制作では、デザインが確定したあとに設計（コーディング）作業に進みます。しかし、Iさんが担当したプロジェクトで設計後に、デザインに変更が発生してしまったことがあったそうです。複数社が関わる案件で、確認事項に漏れが生じてしまったことが原因だったそうなのですが、担当の制作スタッフがバグ1つなく迅速に修正対応してくれたことで、お客様にもご満足いただき、ことなきを得たことがあったとか。

3DCGのとても複雑なデザインだったそうで、当社制作スタッフの技術力の高さを知ることができるよいお話でした。

助けて制作さんの心境のはなし

続いてはディレクターのOさん。

若手ディレクター目線で、制作スタッフにしてもらえるとうれしい＆うれしかった感じた名アシストについて紹介いただきました。

対応が難しい要望をお客様からいただいたとき、「できない」と断るのではなく代替案を出してくれるとうれしく感じるそう。また、レスポンスが早かったり、ディレクターの行動を先回りしてくれるスタッフには、いつも助けられっぱなしですとお話ししていました。

ディレクターの行動を先回りして対応できるように、常にアンテナを張っていこうと思います！

よーく考えよう

最後は、最近バナナにハマっているという制作のHさん。

多忙な中でも「よく考えられた丁寧な入稿」をしてくださるディレクターのお話をしてくださいました。

お客様の要望に対してズレのない入稿や、自分自身が制作することをイメージした入稿は、制作スタッフの内容に対する疑問点が少なくなり、円滑に案件を進めやすくなるため、結果として品質の高い制作物が生まれるとのことでした。

日々のディレクターの丁寧な入稿のおかげで、制作物のクオリティを向上させることができているとし「ディレクターのみなさん、いつもありがとうございます」と最後に締めくくりました。

余談ですが、おすすめのバナナをHさんに聞いたところ「エクアドル産のバナナが甘くておいしい」とのことでした！

まとめ

いかがでしたでしょうか！

今回のテックラウンジを通して、あらためてお互いの仕事内容について理解することができました。お話にあった制作スタッフの名プレイについて、私も真似できるように今後とも精進していこうと思います！

次回のテックラウンジもお楽しみに！

みなさんこんにちは！UI開発者の古川です。

例年に引き続き、今年もテックラウンジ運営委員会主催のイベント「アクセシビリティの祭典 in MLC 2020 ～見つけよう身近なアクセシビリティ～」を開催しました。

過去にも開催していますので、興味のある方はぜひイベントレポートをご覧ください！

• アクセシビリティの祭典 in MLC 2019 開催レポート（8月28日開催）
• アクセシビリティの祭典 in MLC 2018 開催レポート（8月29日開催）
• アクセシビリティの祭典 in MLC 2017 開催レポート（8月30日開催）

「アクセシビリティの祭典 in MLC」とは？

NPO法人アイ・コラボレーション神戸さんが主催しているアクセシビリティの祭典にインスパイアされ企画されたイベントです。

※ なお、アクセシビリティの祭典という名称で社内イベントを行うことについては、イベントの主催者より承諾いただいております。

タイムテーブル

当日はLT2本、そして「アクセシビリティの祭典 in MLC」初めての試みである「絵文字あてゲーム」の3本立てで進行しました。

1. LT：「アクセシビリティ対応とデザインの関係性について」
2. LT：「となりのアクセシビリティ」
3. 絵文字あてゲーム

イベントは新型コロナウイルス感染拡大を防ぐため、オンラインで開催しました。

それでは早速、当日の様子をご覧いただきましょう！

最初の登壇者は、アクセシビリティ部のMさんです。

業務でアクセシビリティチェックを行っているMさん。アクセシビリティ対応とデザイン性を共存させるためには、チェックの結果に対して、達成基準のみにとらわれるのではなく、サイトコンテンツとしてどうあるべきかを踏まえ検討する必要があるとお話しいただきました。

例えばコントラスト比について、WCAG 2.1の達成基準「1.4.3 コントラスト（最低限）」を満たすだけであれば、以下の画像のような奇抜な配色でも問題ありません。しかしデザイン的には人によっては不快感を覚える配色です。

また「アクセシビリティ対応の結果、機能ごと削除する」対応を行ったケースを紹介。アクセシビリティ対応の結果サイトコンテンツに制約が出てしまうことについて、専門分野のMさんとしても望ましくないと感じているとお話しされていました。

「アクセシビリティに準拠するためサイトコンテンツを変更する」のではなく、「サイトコンテンツをよりアクセシブルにユーザーへ提供するにはどうするべきか」の観点でプロジェクト関係者が一丸となって考えていくことが大切だな、とお話を聞いて感じました。

LT：「となりのアクセシビリティ」

続いての登壇者はアクセシビリティ部のKさん。

ディレクションチームに所属するKさんからは、部署のメンバー紹介や、普段の業務内容を実例を交えて紹介いただきました。

アクセシビリティ部が主に行っている活動は、アクセシビリティチェックやガイドラインの策定、社内外に対するセミナー開催など多岐にわたります。その中でもガイドラインの策定について、ディレクターの観点からワークフローを紹介していただきました。

ここで言うガイドラインとは、Webサイト運用おいて準拠したほうがよいアクセシビリティの方針を文書化したものです。ミツエーリンクスではコンテンツやクライアントの要望、運用担当者のスキルなどにあわせ、わかりやすく、かつWCAGやJIS X 8341-3に準拠したガイドラインを作成するサービスを提供しています。

このガイドラインの制作については、単に達成基準を列挙するのではなく、クライアントと打ち合わせをした上でガイドラインの目的や準拠しやすい順に達成基準を整理していくとのこと。そして個々の達成基準の説明を掲載するなどの工夫を行うそうです。

また、ガイドライン作成後、それを浸透させるためのプランニングを提案し、クライアントと共によりよいWebサイトを作成することを目標にしているとお話しされていました。

ここで紹介したガイドライン策定のワークフローは一例ですが、普段アクセシビリティ部の方がどのようなことに配慮して仕事に取り組んでいるのか知ることができました。

絵文字あてゲーム

みなさんは支援技術で絵文字が音声読み上げされることはご存じでしょうか。

アクセシビリティの祭典最後のコーナーは「絵文字あてゲーム」でした。絵文字あてゲームは、NVDAでの絵文字の読み上げ方を早押し形式で当てるというものです。

みなさんは以下のスクリーンショットにある絵文字の中で、「ろめんでんしゃ」を表す絵文字はどれかわかりますか？

答えは「c」です。

上記のように絵文字の読み方に関するクイズが複数出題され、視聴者と登壇者を含めた全員で手に汗握る白熱した戦いを繰り広げました。

最後にひとつ問題を出したいと思います。以下の絵文字は何と読むでしょう。

正解は「訴えるような顔」です！

当社アクセシビリティBlogでは「絵文字をスクリーンリーダーに読み上げさせてみた」という記事を過去に公開していますので、ほかのスクリーンリーダーで読み上げをさせてみたらどうなるのか、興味のある方がいらっしゃいましたらぜひご覧ください。

まとめ

いかがでしたでしょうか。イベントに参加した感想としては、どのコーナーも知見を広められとても楽しかったのですが、特に最後の絵文字当てクイズについては早押しクイズだったこともあり、つい一視聴者として熱中してしまいました😓

絵文字あてクイズは手持ちのスクリーンリーダーでも開催できるので、とっさのアイスブレイクにも手軽に行えそうですね。

次回のテックラウンジは10月を予定しています。お楽しみに！

皆さんこんにちは。UIデザイナーの大和屋です。今回は、8月19日に開催されたテックラウンジVol.88の様子をご紹介します。 今月は「最近気になっているあんな技術こんな技術」と題しまして、登壇者が気になっている！おすすめしたい！技術についてお話を伺いました。

最初の登壇者はUIデザイナーのKさん。

「芸術的創造は脳のどこから産まれるのか？ 」という本の中から一部のトピックスを取り上げ、「創造性が生まれるメカニズムを知ることで、立ち回り方が変わってくるという話をしてくださいました。制作時に行き詰まってしまったときに、とても使える知識だと感じました！ 　

IEから学ぶ技術

続いてはUI開発者のKさん。

旧バージョンのIE対応をすることが多かった案件で、学んだことをお話ししていただきました。最新の技術では対応できないこともあり、古い技術を使って問題を解決していくなかで学んだことがとても多かったそう。最新の技術だけでなく、古い技術にも目を向けることで、おもしろい発見や知らなかったことを知ることができたとのことでした。

お客さまからお問い合わせが来たら、どうやって仕事につなげようかな技術集（仮）

最後にディレクターのSさん。

ディレクターとして気になっている最新の技術の中から、業務につなげられそうなものを紹介していただきました。ノーコード開発、5G、VRコマースなどの新しい技術とWebと連動させることへの考察など、とても興味深い内容でした。最後には、新しい技術を取り入れたサービスを生み出すことも重要なことだが、お客さまに寄り添うことが1番大切なサービスであると締めくくりました。

まとめ

いかがでしたでしょうか。 次回のテックラウンジは9月2日。毎年恒例の「アクセシビリティの祭典 in MLC」の回です。今年はどんなお話が聞けるのでしょうか、お楽しみに！

皆さんこんにちは。UI開発者の増田です。今回は、6月24日に開催されたテックラウンジVol.86の様子をご紹介します。 今月は「配属おめでとう！2年目が語る19新卒奮闘記」と題しまして、昨年度の新卒入社スタッフにこの1年で何を学び、どう成長したのかを語ってもらう、毎年恒例のLTをしてもらいました！

• 2019年：Vol.77「るんるん気分♪配属おめでとう会～2年目が語る18新卒奮闘記～」（5月22日開催）
• 2018年：Vol.68「乞うご期待 17卒の 武勇伝」（5月23日開催）

最初の登壇者はUIデザイナーのHさん。

自身の1年を振り返りながら、身につけた仕事の進め方や業務に取り組むときに大切にしていることなどを、心得としてお話しいただきました。 日常の業務に役立つテクニックやコミュニケーションの取り方についてなど、職種問わずためになるLTでした。

Fw:モニタークラッシュから始める私のディレクター生活

続いてはディレクターのNさん。

実はイメージしづらい「Webディレクターの仕事とは」というところから、チームで働く上での大事なポイントなどをお話しいただきました。 顧客と制作側でデザインイメージをしっかりとすり合わせておくこと、先輩が忙しそうにしていても、自分で判断せずに必要なことは必ず確認するといった点は、基本的なことですがやはりとても大事なことだと感じました。

やらないスイッチの作り方、教えます

最後にUI開発者のYさん。

タイトルのインパクトがすごいですね！「やらないスイッチ」とは仕事とプライベートの切り替えをするためのスイッチのことだそうです。 勤務が終わってもついつい仕事のことを考えてしまいがちですが、しっかりと区切りをつけることで、プライベートが充実し、仕事の質が高まる（より頑張れる）ようになるというとても興味深い内容でした。

まとめ

いかがでしたでしょうか。 次回のテックラウンジは7月22日。毎年恒例のみなさまにひやっとした涼しさをお届けする「本当にあった怖い案件」の回です。今年はどんなお話が聞けるのでしょうか、お楽しみに！

皆さんこんにちは。UIデザイナーの大和屋です。 今回は、5月27日に開催されたテックラウンジVol.85の様子をご紹介します。 今月は「新卒で 知りたかったよ この技術」と題しまして、研修中の20新卒に向けて配属時の手助けとなるよう、ショートカットキーやおすすめの拡張機能などについてのお話を伺いました。

最初の登壇者はデータアナリシス部のGさん。

Googleで検索を行うときに便利な「フレーズ検索」「-(マイナス)検索」などのテクニックについてお話しいただきました。調べる速度が速くなれば問題解決も速くなる。その結果、知識と経験が積み重なり作業効率化につながっていくとのことでした。

新卒のころ知りたかったHTML、CSS、JS

続いてはUI開発者のSさん。

新卒の時に先輩から指摘してもらったり、先輩を見て「考え方が変わった」「正解がわかった」ことについて、HTML、CSS、JavaScriptのそれぞれにあった気づきを共有いただきました。 先輩や他部署の方の社内レビューのログや外部プラグインの中身を見てみると、とても勉強になるとのことでした。

デザインはじめのこばなし（仮）

最後にUIデザイナーのTさん。

デザイン効率化に役立つ「手間を省く」「迷いを減らす」「負担は少なく」という3つのポイントについてお話しいただきました。

• 「手間を省く」：便利な拡張機能をインストールしたり、ワークスペースのカスタマイズをしよう
• 「迷いを減らす」：先輩のデザインを見て技術を盗もう、デザインやWebのトレンドなど情報を収集しよう
• 「負担は少なく」：使うツールでどういったことができるのか把握しよう、1px単位のデザインをしよう、オブジェクトの中心と重心の感覚を掴もう

まとめ

いかがでしたでしょうか。 次回のテックラウンジは6月24日。新卒2年目が語る、配属の心構えについてお話しいただく予定です。お楽しみに！

皆さんこんにちは。UI開発者の古川です。 今回は、2月19日に開催されたテックラウンジVol.84の様子をご紹介します。

今月は「ウルトラハイパフォーマンスのサイトを目指せ！Webパフォーマンス改善大特集！」と題しまして、Webサイトパフォーマンスや作業効率化についてお話を伺いました。

最初の登壇者はUI開発者のUさん。

普段の業務にまつわる作業効率化について、キーボードショートカットから自作したツールの紹介、制作が作業しやすい入稿原稿の書き方などを交えてお話いただきました。

ツールだけの効率化だけでなく、制作とディレクターのコミュニケーションの効率もあわせて気遣うことで、Web制作の効率化につながると仰っていました。

プレコミットフックで画像の圧縮を自動化しよう

続いてはUI開発者のOさん。

普段業務でよく行う画像圧縮について、プレコミットフックで動作する自作ツールを共有いただきました。画像圧縮はWebサイトパフォーマンスを改善するための基本的な作業なので、自動化を積極的に行っていきたいですね。

今からできる効率化Lighthouseのスコアで一喜一憂する前に心配すべきこと

最後はアクセシビリティエンジニアのKさん。

Lighthouseのスコアは、時間や状況とともに計算方法が変わるため、点数そのものに本質的意味があるわけではない​とのこと。ただし計算方法のもとになっているのが統計のため、周りのWebサイトが速くなれば自分のサイトは遅くなります。そのためWebサイトの運用において、同じ作業を続けているだけではなく改善を図る必要があるとのことでした。

2019年度のイベントは最後です！

2019年度のテックラウンジは今回で終了となります。今年度のテックラウンジを振り返ってみましょう。

テックラウンジのテーマ名は毎回、テックラウンジ運営委員会がある一定の法則に則って考えています。たとえば2018年度のテックラウンジは「（ほぼ）5・7・5」でした。今年はどんな法則かというと...「（ほぼ）しりとり」でした！

お気づきになりましたでしょうか。ぜひもう一度テーマ名を読んでみてください！

2013年12月に始まったテックラウンジは今回で通算84回目を迎えることができました。来年度も引き続き、社員がお互いに高め合うことができる楽しい場にしていきたいと思います。

次回のテックラウンジは2020年4月開催を予定しています。お楽しみに！

皆さんこんにちは！UI開発者の柴田です！今回は、2月12日（水）に開催された臨時イベント「利きWeb制作どっちでSHOW！」の様子をご紹介します。

「利きWeb制作どっちでSHOW！」はクイズ大会です。回答者は2人1組のペアとなり、フロントエンド、デザイン、ディレクションなどの分野にちなんだAB選択クイズに回答して正解率を競います。最も正答率の高かったペアにはなにかプレゼントがあるかも...！？

問題出題例

ここで問題の一部を公開したいと思います！正解は最後にお教えしますので、是非記事をご覧の皆様もお考えください！

問1

問2

問3

当日の会場の様子

ペア同士で楽しく話し合ってAかBの札を上げ、回答に一喜一憂したり、観客のスタッフも頭をひねって思案していたり、とても有意義な時間が過ごせたと好評でした。

15問程で終了し、正解数の多かったペアにはバレンタインが近かったということでちょこっと高いチョコをお渡ししました！！ご参加くださった他のペアの方たちにもちょっとしたチョコをお渡ししました！

まとめ

いろいろな職種のスタッフに参加していただいたので、専門外の問題では「へ～、そうなんだぁ～」という声がちらほらと聞こえてきました。ゲーム感覚で楽しみながら他の職種に関わる知識を共有でき、とてもよい経験になったのではと感じました。自分自身も知らなかったことが多々あり、とても勉強になりました！

答え

問1 A
問2 A
問3 A

次回のテックラウンジ開催は2020年2月19日になります。お楽しみに！

]]>

皆さんこんにちは。UI開発者の片柳です。
今回は、1月22日に開催されたテックラウンジVol.83の様子をご紹介します。

今月は「どーなる2020年！気になる技術大集合！」と題しまして、Web制作にまつわるさまざまな技術やサービスについてお話を伺いました。

最初の登壇者は、UI開発者のMさん。

WEB DEVELOPER ROADMAP-2020を見ながら、UI開発者として求められる技術や、これから学ぶべきフレームワークなどをお話しいただきました。

Web制作に関わる技術がずらりと並んだロードマップ。
説明とともに1つずつ確認していくことで、今の自分ができること、そして今からできることをあらためて確認することができました。

新しい技術が毎日のように増え続けるWeb制作の世界ですが、アンテナをしっかり立てて、常に追い続ける気持ちを忘れないようにしたいですね。

クラウドサービスの話

2人目の登壇者は、インフラチームのMさん。

AWSに関連するサービスとこれから盛り上がる新しいサービスについて、Amazonの商品ページを用いて分かりやすく解説していただきました。

世界的にシェアが高いAWS。商品ページ1つを取っても、5種類以上ものサービスが活用されているというのですから驚きです。
サービスはWebサイト上にとどまらず、近年は画像認識や自動運転といった機械学習の分野にも力を入れているとのこと。

5月にはAWS SUMMIT TOKYOが開催されます。
ますます盛り上がるAWSから目を離せませんね。

2020年ことはじめXDを始めるなら今

3人目の登壇者は、アートディレクションチームのAさん。

2019年にリリースされ、現在では多くの企業で活用されているAdobe XDのアップデートを追いながら、有用な使い方について解説いただきました。

2019年のアップデートでは、従来のツールには実装されていなかった同時編集機能や、バージョン管理機能、いくつかのデザインパターンを実装できるステート機能などが追加されました。
デザインをより公開されるWebサイトに近い状態で見せることができる他、データの共有やレビューもより簡単に行えるようになったそうです。

現在でもAdobe XD: Feature Requestsを用いたアップデートが続いており、より現場の要望に沿ったツールへと進化していくことでしょう。

まとめ

いかがでしたでしょうか。
次回のテックラウンジは2月19日。Webパフォーマンスを向上させた事例や技術についてお話しいただく予定です。お楽しみに！

皆さんこんにちは！UI開発者の古川です。11月20日（水）に開催されたテックラウンジVol.82の様子をご紹介します。

「テックラウンジアワード」とは、テックラウンジ運営委員会が主催するイベントの中で、もっとも輝いていた方を表彰するアワードです。今回は、2019年1月から10月までの期間で開催したイベントが対象です。

イベントを一緒に盛り上げてくださったみなさまへ感謝の意を込めて、テックラウンジ運営委員会よりピザとお菓子を用意しました。まずは会場に集まった社員みんなで乾杯です。

アワード対象イベント

今回エントリーされたイベントは以下です。リンク先はテックラウンジBlogの各イベントレポートとなっています。それぞれのイベント詳細についてはぜひレポートをご覧ください。

テックラウンジ

臨時イベント

テックラウンジはイベントの様子を動画アーカイブで保存しているのですが、今年のテックラウンジを5分間の動画ダイジェストで振り返り、会場は和やかな空気となりました。

アワード発表と表彰

振り返りを行ったあとは今回のメインイベントであるアワード発表を行いました。

アワードのラインナップは以下です：

見事アワードを受賞した方には、テックラウンジ運営委員会から粗品と手作りの賞状を贈呈しました。

LT振り返り上演​​

最後に振り返り上演ということで、今年お話しいただいたLTの中からよりすぐりの2本をリバイバルで上演していただきました。

ひとつめはアクセシビリティの祭典 in MLC 2019より「僕がアクセシビリティをどうやって勉強したか。」について、「どういう流れでアクセシビリティに対する理解が深まったのか」「価値観がどう変わっていったのか」がその後どう変わっていったかを語っていただきました。

ふたつめはテックラウンジ Vol.79「うらめしや...？ ほんとにあった怖い案件 2019」より「消える案件。。2019」について再びお話しいただきました。ちなみに登壇した当日は何も起こらなかったそうです。

まとめ

2019年に開催予定のテックラウンジはこれにて以上です。2019年は25本のLTを聞かせていただきました。来年はどんなLTが聞けるのでしょうか。今からとても楽しみです。

次回のテックラウンジ開催は2020年1月になります。お楽しみに！

皆さんこんにちは！UI開発者の澤田です。

10月23日に開催されたテックラウンジVol.81の様子をご紹介します。

今回は、行楽の秋！ということで（？）、オフィスの外に出て働くスタッフにお話を伺いました！

1人目の登壇者は、クリエイティブディレクターのSさんです。

当社でいうクリエイティブディレクターとは、制作とディレクションの両方を受け持っているスタッフのことを指します。
制作でありながらも、お客様と直接コミュニケーションをとる機会が多いSさんは、「外出時などに、お客様とやりとりするということ」についてお話してくださいました。

社内で制作作業をしているだけだと、得られるビジネススキルに偏りがでてしまったり、お客様の要望をくみ取りにくいことがあるそうです。そうしたときに、外出をしたり、お客様とコミュニケーションをとることで、自らアウトプットする機会が増え、仕事に対する視野が広がり、その経験が自分自身のスキルアップにつながることが多いそうです。

また、昨今はAIの発達もあり、+αの付加価値が求められている風潮があります。ただ制作物を作るだけじゃない、よりよいサービスや提案を求められている中、自身も、仕事仲間も、お客様も、みんなが win-win の関係になれる未来を見据えた働き方ができることが理想だとおっしゃっていました。

こちらサテライトオフィス

2人目の登壇者は、ディレクターであり当社のサテライトオフィス第一号のAさんです。

Aさんは、普段は本社オフィスではなく、他県にあるご自宅からリモートでお仕事をされています。今回はご自宅から通話をつないでAさんに登壇いただきました。

業務時間や仕事内容は本社と変わらず、リモートだからこれはできない、という壁は少ないようです。
とはいえ社内外の打ち合わせに頻繁に参加できるわけではないので、ディレクターを2名体制にして本社にいるディレクターが社外の打ち合わせに参加したり、グループ通話やテレビ会議を通じてお客様や社内スタッフとやりとりをしているそうです。
ただ、直接顔が見えるわけではないので、誰が誰に向けて話しているのかがわかりにくい、リアクションが見えないので話がきちんと伝わっているか不安になる...といったこともあり、改善していきたいポイントでもあるとのことでした。

また自宅で仕事をしている関係で、運動する機会が減ってしまったため、お昼の時間にランニングするようにしたりと、生活にも変化があったようです。

まとめ

いかがでしたでしょうか？普段社内での業務が多い私にとっては、とても魅力的なお話でした！
ビジネススキルは職種関係なく習得しておきたいですし、自分に合ったビジネススタイルを実現させるためにも、視野を広げて仕事をするというのは大事なことですね！

11月は、2019年のテックラウンジイベントを振り返って、アワードを発表しちゃいます！！さまざまな賞にノミネートされるのは一体誰なのか？！大好評だったあのLTがもう一度...？！

その様子は次回のBlogでお届けします！ぜひお楽しみに！！

皆さんこんにちは。テックラウンジ運営委員の片柳です。

毎年秋の恒例となっているデザインスプリントが今年も開催されました。

テックラウンジ運営委員会主催のデザインスプリントとは、UIデザイナーがチームに分かれ、ライブデザイニングを行う様子を、実況解説を交えつつ見学するイベントです。

UIデザイナーは2人1組の全3チームに分かれ、それぞれのノウハウを駆使して、制限時間20分で出されたお題に沿ったデザインを作成します。

昨年に引き続き、お題はテックラウンジ運営委員会によるオリジナル。

普段見ることができないデザイン作業の裏側を、今年もしっかり堪能させていただきました。

• 架空のクレジットカード「MLCカード」のキャンペーンバナーの作成依頼
• 2019年11月1日～2020年2月29日の間に新規入会特典として、「てっくらうんじちゃんコラボカード」が選べる（デザイン2種）
• コラボをきっかけに新規会員獲得を目指す
• カードのイメージにあったデザインを希望

いざ、作成開始

どのペアもまず、テキストをアートボードに配置する作業から始まりました。

ピンクと青、どちらの色のカードも載せなくてはならず、まとまりを持たせるための配色や配置に悩みます。

webサイトに対し、フォントや色遣いに制約が少ないことがバナー作成の醍醐味。

チームの方針や個人の好みも交えつつ、あっという間に20分の作業時間が終了しました。

完成！

3組の完成品をそれぞれご覧いただきましょう。

クレジットカードの色味を生かし、同じトーンの黄色を配置することで、柔らかな印象を与える作品に仕上がりました。

テキストの後ろにあしらった斜線も特徴的ですね。

中央に大きく円を置き、「新規ご入会」の文字をぐっと目立たせたこちらのバナー。

パキッと色を分けたことで、カードの色を選ぶ楽しさをイメージさせるようなデザインになりました。

ターゲットユーザーや競合を想定し、実案件に近いイメージを持ってデザインに臨みました。

カードの下に映り込む影や、躍動感にもこだわりを感じます。

最終成果物

後日、登壇いただいたUIデザイナーの皆さんには、作成したバナーの最終成果物をお願いしました。

作りたかったデザイン。イベント中に思いついたこと。他のペアの作品を見て気づいたこと。

それぞれを取捨選択し、まとめ上げ、形にする、UIデザイナーの偉大さを改めて感じることができるイベントとなりました。

それでは、次回もお楽しみに。