見出し画像

「学びの4989」100歩目突破記念！ 人気TOP10まとめ

STUDIO DETAILS "4989"

こんにちは。スタジオディテイルズのチーム4989です！

前回の第1回投稿では、多くの方にご覧いただきありがとうございました！
初めての取り組みでまだまだ慣れませんが、引き続き見ていただけると嬉しいです！

第2回は、私たちの活動のひとつである「学びの4989」について紹介したいと思います！

「学びの4989」って？

「学びの4989」とは、若手が日々の業務の中で学んだディレクション・デザイン・プログラミングの知識をTipsとして投稿しているコンテンツです。


「Twitterを見てくださる方のためになるコンテンツも発信したい」という理由で始めたこのTipsもとうとう100歩目…。どういう風に書いたらうまく伝わるのか、四苦八苦しながら更新してきましたが、みなさまの暖かい反応に支えられてここまで歩むことができました。ありがとうございます！

今回は100歩目突破を記念して、今までの投稿の中で人気だったTipsをランキング形式でまとめました。Twitterには載っていない、投稿者による追加の解説つきで、深く掘り下げてご紹介していきます！実践に繋がる学びのまとめに少しでもなっていましたら嬉しいです。


まずは、10位〜4位までです！

【第10位】 

-
【モーショングラフィックスのトランジションあるある vol.2】
-
自社リール用に、今村総合学園さまのポスターをモーショングラフィックにした作品から、Tipsを作成しました。そろばんをぱちぱちと揃えている音が聴こえてくるようなを動きイメージしています。このように、そのモチーフの特性を認識し、それに合ったトランジションの動きを考えていくことが、モーショングラフィックにおいて大切になるということを学びました。


【第9位】 

-
【デザイナーが入れておきたいchrome拡張機能 RainDrop】
-
chromeの標準ブックマークではデザイン参考サイトの細かいカテゴライズやそれを引き出す機能がないなと不便に思っていたときに、社内の他のデザイナーに教えてもらったツールです。非常に便利で重宝していたので、他のデザイナーの方にも共有したいなと思いTipsにまとめました。


【第8位】

-
【正しく意図が伝わる レタッチ指示の伝え方】
-
SDでは「デザイナーズラボ」という先輩ADから若手のデザイナーへ向けて知見を共有していただく場があります。実際の案件での撮影画像を元に若手デザイナーがそれぞれに指示書を作成し、それに対してADからフィードバックをいただく中で、どのようなレタッチ指示を出したらよりクオリティを上げられるかを学びました。


【第7位】

-
【翻訳ツール　DeepL翻訳】
-
DeepL翻訳は日々の業務で使用しており、ネイティブの方に確認していただいても、ニュアンスに問題なく通ることもあるくらい優秀です。
ビズハニのげんきさんにリツートしていただきイイネ数が上がり感謝です…


【第6位】

-
【サイトレビュー】
-
週3回ADによるサイトレビューがあり若手スタッフに共有していただいています。自分たち若手では気づくことのできないサイトに出会うことができることは勿論、参考にしているポイント・着眼点も学ぶことができています。社内だけでなくクリエイティブに携わる様々な方に知っていただきたいと思い投稿いたしました。


【第5位】

-
【webの文字組入門 - 大きさ編】
-
会社のADの方の作成したデザインを色々見ていく中で基本的な文字サイズのルール設計には一定の法則があることに気づき、多くの若手デザイナーの学びになるのではと思い、基本的な内容をTipsにまとめました。


【第4位】

-
【WebGLのソースコードの調べ方】
-
最近はブラウザでソースコードを解析するというのは難しくなっておりますが、この機能を使用するとWebGL（正確にはGLSL）のコードが整って表示されるので気になるサイトを調べられます！


ここまでが第10位から第4位まででした！
様々なジャンルで人気投稿がみられ、幅広い層の方に見ていただけているのだと感じられ嬉しいです！

それでは、いよいよTOP3です！
第3位は、学びの4989の第1歩目を踏み出したこちらのTipsです！


【第3位】

-
【レイアウトの基本はカタマリを意識すること】
-
情報を理解し、優先順位をつけレイアウトする。言葉・図に表してみると簡単そうに見えますが、実際の制作になると、この基本が守れていないことが多々あります。おしゃれに崩すのは、基本ができてから。日々この基本をわすれずにいきましょう！


第2位は、
写真合成ってこんな自然にできるんだ！と思えるこのTipsです！


【第2位】

-
【切り抜いた素材を色ベタ背景に自然に合成する方法】
-
入社して初めて関わった案件で先輩のPSDの中身を盗み見て覚えた技です。更に厳密に自然に合成したい場合は、②のレイヤーを「影」と「パン」に切り分けて下に重ねると、影とパンの陰影を分けて微調整できるのでおすすめです！


そして、第1位！
弊社実績をもとに紹介した、制作過程の実践的なノウハウのTipsです！


【第1位】

-
【WebGL　写真の画質を高画質に保ったまま動画をアップする方法】
-
バーミキュラフライパンのサイトで、弊社エンジニアの辻さんと岩崎さんが実践してくださったものをTipsにしました。SDの昔からあるテクニックを辻さんがアイデアとして提案し、岩崎さんがそれを元に実装されたそうです。ただ載せるだけではなく、フライパンから水分が蒸発しているように見えるよう、静止画のフライパン画像は蒸発前と蒸発後の2枚用意して、JSでクロスフェードさせて切り替えているという細かい気配りがすごいです…。
IE対応の際にも工夫した点をTwitterに投稿しているのでぜひご覧ください！
https://twitter.com/ko_yelie/status/1270677845992337414


さいごに

小さな一歩でも忍耐強く続けることで大きな成長に繋がると信じ、これからも毎日「学びの4989」の更新を続けていきます。

見てくださる方と一緒に成長できる、そんなコンテンツになるよう、Tipsの内容も少しづつ変えていければと思っていますので、ご意見・ご感想ありましたらTwitterなどでコメントいただけると嬉しいです！

よろしければ、各SNSフォローお願いします！

Twitter：https://twitter.com/studiodetails　
Instagram：https://www.instagram.com/studiodetails/ 　
facebook：https://www.facebook.com/studiodetails/　　　


編集：チーム4989一同

この記事が気に入ったらサポートをしてみませんか？