4009 Designer's Book

【無料で使える】SEOツール４選！

こんにちは！nabeです。今回は無料で使用できるSEOツールを記事にしたいと思います！いまから紹介するものは登録不要で手軽に使うことができます。私自身勉強中であるため、こういったものがあるんだ〜とお気軽に読んでいただけると嬉しいです。 Ubersuggest無料のchrome拡張機能で、毎月検索ボリューム、CPC、競合データのキーワードを表示するパワフルなSEOツールです。検索ワードに対して1回のクリックあたりにどのくらい費用がかかるかかわかります。例えば、あるワー

職場や仕事で生成AI使ってますか？WEBデザイナーの生成AIを使った社内活動・共有会などの記録

こんにちは！株式会社フォークのWEBデザイナーoyamadaです。近頃、業務が少し多忙となってしまい、デザイナーの学習記録は一旦お休みさせていただきます🙏 ところで皆さんは、お仕事や業務でもうAI関係はガシガシ使っていらっしゃいますでしょうか？昨今、作業の効率化を図るためにもAIの活用は必須となる時代。正直、アラフォーの私は、時代の進化や新しい技術に追いついていくのに、いっぱいいっぱいに感じてしまうことがあります💦 そんな時、会社に所属していて良かったなと思うの

【超簡単】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デザインの神が宿る細部」より、以下が記されているようです。ちょっと難しいですが、ユーザーとのコミニケーションの一つで、ユーザーが行った動作をわかりやすく伝えることことができます。例としては、ハートのいいねボタンを押

フォローしませんか？

#Webデザイン