4009 Designer's Book

378

本

株式会社FORKのデザイナーたちが普段考えてる事や、デザインへの取り組みなど、多種多様なテーマで発信しております！

運営しているクリエイター

#Webデザイン

【超簡単】AdobeChで「ずんだもん」をアバター化してみた

「Adobe Charactor Animater」（以下Adobe Ch）は手軽にアバターを作成出来るモーションアニメーションソフトです。パーツ分けした.psdや.aiファイルを読み込めばほぼOK。今回は「ずんだもん」をアバター化しVOICEVOXで作った声をリップシンクさせてみました。といっても動かすのは、頭、眉、目、口だけ。目や口は開閉状態をレイヤーのON・OFFで切り替え、髪の毛が風になびくなどの凝った動きはやりません（というか出来ません）。 👉Adobe C

Figma基礎編:Part1 「ワークスペースについて」

今回は自分自身の復習も兼ねて、Figmaについて記事を書きます！基礎編・応用編をそれぞれ2記事ずつ、計4記事構成で進めていけたらと思ってます。まずは基礎編:Part1 「ワークスペースについて」についてです。 1．ワークスペースの構造Figmaのワークスペースは「チーム」>「プロジェクト」>「ファイル」>「ページ」という構造になっています。 1．チームとはチームはワークスペースの中で一番大きな単位で、組織ごとに作成するものです。またプロジェクトの作成やチームに参

【STUDIO】リンク設定のおぼえがき

こんにちは、株式会社フォークのnagamです。先日公開された弊社デザイナーたちのSNSでの作品をまとめたサイト「4009 Designer's Board」チームで何度もデバックを繰り返し、もう大丈夫だろうというところで「ナビのアンカーリンクが上手く飛んでいない」という問題が発生しました。後学のため振り返ってみようと思います。うごきを確認してみよう上部固定のナビのメニューをクリックすると、同ページの該当箇所に遷移するアンカーリンクを設置していました。予定通り、

【STUDIO】ボールが落ちてくる！ホバーアニメーションのつくりかた

こんにちは、株式会社フォークのnagamです。先日弊社デザイナーたちのnote・instagramをまとめたサイトが公開されました👏 ＼＼4009 Designer's Board です／／こちらのサイト制作は、部署の垣根を超えて横断で活動しているノーコードチームがSTUDIOで行いました。詳しくはチームメンバーのoyamadaさんが記事にされているので要チェックです。 ↓↓↓ 記事の中でご紹介いただいている、「ドロワーメニューのホバーアニメーション」。こちらの実

4009 Designer's BoardがSTUDIO Showcaseに掲載されました

皆さん、こんにちは！株式会社FORKのwebデザイナーoyamadaです。ちょうど先月こちらの投稿で、社内のデザイナーみんなで日々のアウトプットを紹介するサイトの完成＆公開をシェアさせて頂きました。 noteでもたくさんの「いいね」を頂けました🙏見てくださった皆様、「いいね」してくださった皆様、どうもありがとうございます！！私たちのサイトが、多くの方にご覧頂けてるかと思うと、大変うれしく感じるのと同時に、今後の日々のアウトプットの励みにもなります！弊社デザイナー

Figma新機能「マルチ編集」を使ってみる

こんにちは、nabeです！ Figmaでは3月に新機能「Multi-edit playground」がリリースされました🎉 理解するのが少々難しく、苦戦ながらも機能について整理してみたので、今回はその内容を書いていければと思います！ 1.特徴わかったようで、よくわからないような…。まずは編集に入る前に共通レイヤーのルールを整理したい思います。 2.「Matching layer」とはMacting layerとはframeを越えて共通するレイヤーのことを指します。共

【STUDIOでWEBサイト制作】デザイナーのアウトプットサイト公開しました！

皆さん、こんにちは！株式会社FORKのwebデザイナーoyamadaです。社内のデザイナーみんなで日々デザインに関することをnoteやInstagramでアウトプットしています。企画はnote/Instagramのプランニングチームがいつもお題や企画を考えてくれています。私が所属するノーコードチームでは、前期からそのInstagramとnoteのアウトプットを一つにまとめたアーカイブページを制作するプロジェクトが進行していました👏 アーカイブページが完成＆公開しまし

STUDIOのAPI連携でInstagram投稿の投稿を表示させる方法（2024/2/29修正＆追記版）

株式会社フォークのWEBデザイナーoyamadaです。以前、こちらの投稿STUDIOのAPI連携でInstagram投稿の投稿を表示させる方法（覚書き）の訂正版となります！訂正箇所は、動画のサムネが表示できないと思っていたのですが、すみません💦できました🙏 社内で一緒に活動していたノーコードチームのメンバーに聞いて、よくメモを見直したら、前回、最後の最後のステップのSTUDIOに貼り付けたこちらのURLを少し変えたら、動画のサムネのURLを引っ張ってくることができま

生成AIでラブソングのジャケ写デザイン

こんにちは、株式会社フォークのデザイナー4009_waterです。今月は社内のデザイナーで取り組んだInstagram企画「ラブソングのオリジナルジャケットデザイン」のメイキングをご紹介します。素材づくりには生成AI「Midjourney」を活用しています。もちろん架空のジャケットデザインでレーベルやアーティストとは一切関係ありません。 1. 曲選び私はヒゲダンの「115万キロのフィルム」をイメージしてデザインすることにしました。曲名の由来は「人の一生（約80年）をフ

STUDIOで上から下がるドロワーメニューを作成する

皆さん、こんにちは！株式会社FORKのwebデザイナーoyamadaです。現在、社内のデザイナーの日々のアウトプットを掲載するアーカイブページを、STUDIOで共同作業をしながら制作中です。今回はその制作過程で、STUDIOで上から下がるドロワーメニューを作成した手順を覚書きを残しておきます。 STUDIOの操作の学習をされている方にとって、お役に立ったら幸いです。【完成形】完成形はモバイルデザインのハンバーガーメニューをクリックすると、ヘッダーから下にメニュー

話題の画像生成AI「Midjourney」を使ってみた

あけましておめでとうございます。今年もよろしくお願いします！ 2024年の一本目は「画像生成AI」について書いていこうと思います🖋 生成AIと聞くと「ChatGPT」や、Adobeが昨年提供を開始した「Adobe Firefly」など思い浮かべる方が多いのではないでしょうか？調べてみると様々な生成AI系のコンテンツがあり成長スピードに驚きます。今回は私が最近使用して感動した画像生成AI「Midjourney」を中心に、生成AIとは何かに触れつつ、使用方法や特徴をま

Figmaでマイクロインタラクションを作成する

こんにちは！nabeです。今回はFigmaで「マイクロインタラクション」を作成するにあたって、例を用意し簡単な手順についてご紹介できればと思います。そもそもマイクロインタラクションって何？DanSaffer氏の書籍「マイクロインタラクション－UI/UXデザインの神が宿る細部」より、以下が記されているようです。ちょっと難しいですが、ユーザーとのコミニケーションの一つで、ユーザーが行った動作をわかりやすく伝えることことができます。例としては、ハートのいいねボタンを押

SNS埋め込み活用ツールEmbedSocialのFREEプランを試してみる

皆さん、お久しぶりです。株式会社フォークのoyamadaです。先月、こちらのSTUDIOのWEB制作会社向けのウェビナーに参加させて頂きました＾＾栃木のWEB制作会社Re:designさんのお話、とっても参考になり、また親切に質問にも回答してくださってこれからSTUDIOを導入検討している側としては大変ありがたかったです！案件では、InstagramなどのフィードをEmbedSocialを使って表示されていると伺い、EmbedSocialを試してみることにしました。

2023年版：秋のデザインを集めてみた

こんにちは！nabeです。最近は夜も少し涼しくなってきて過ごしやすくなりましたね。体感的にもそうですが、お店や広告なども「ハロウィン」や「秋の食べ物」と関連したものが多く、視覚からも秋を感じることが多くなりました。今回の記事は「秋のデザイン集めてみた」と題し、どんなものがあるかみていきたいと思います〜！バナー広告編1.ミスタードーナッツ　MISDO HALLOWEEN ハロウィン象徴するモチーフ「月、かぼちゃ、おばけ、コウモリ」などが使用されています。背景色にオレ