生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
「UIの良さ」ってのはユーザビリティだけじゃないんだよ〜UNDERTALEのUI｜Yamashita Angelica
この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。2015年にPC向けに開発され、現在はSteam、XBOX、PSVITA、PS4、Nintendo Switch…と、多くのプラットフォームで遊ぶことができます。 ほぼToby Fox氏個人で開発した作品でありながら、各メディアのGOTY（ゲーム・オブ・ザ・イヤー）に多数ノミネートされており、「メタルギアやマリオが出てくる受賞ランキングに個人開発ゲームが入ってるってどういうことだよ！！！！！？？？？！！！！！」と当時せっせとゲームスタジオで働いていた私は卒倒しそうになりました。 こ
デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph
見やすいスライド資料は事前準備と5つのコツさえ押さえればOKクライアントさんに向けてのプレゼンテーションや、社内共有向けの資料、セミナーでの登壇資料などで用いられる「スライド資料」。いざ作ってみると、「なんだか読みにくいな」「色やレイアウトがまとまらない」と感じ、苦手意識を持っている方は多いかもしれません。 でも、デザイナーじゃなくても！デザインツールを使わなくても！いくつかのコツを押さえるだけで見やすいスライド資料は作れます。 この記事では、見やすいスライド資料をデザインするコツを5つの章に分けてご紹介していきます。 「レイアウト」「カラー」など、気になるところから読んでみていただいても大丈夫です。 スライド資料の作成だけでなく、バナーやチラシなど、いろんなデザインにも役立つコツをイラスト付きでわかりやすく説明しているので、今作っているデザインに悩んでいる、デザイン勉強中、という方もぜひ
図解がつくれると伝わり方が変わる！ 初心者のための図解作成ガイド【事例あり】｜鷹野 雅弘
「図解」は資料作成やプレゼンスライドの制作に欠かせません。その一方で「図解を作成してみたいけれど、経験がない」「これから図解をどんどん取り入れていきたい」という方のために、図解作成のノウハウを基本中の基本からまとめてみました。 今回の記事はアドビ社のPR企画「みんなの資料作成」に参加して執筆しています。 1 | 図解の定義まずは「図解」の定義について考えてみましょう。 たとえば、書籍『たのしいインフォグラフィック入門』の中で著者の櫻田 潤さんは次のように定義されています。 図解とは、単純な図形と短い言葉で、物事を説明するグラフィック 非常に明快ですが、人によって定義が異なりますし、また時代によって移り変わっています。 類語から「図解」の定義を探る言葉の定義を考える際に有効なのが〈類語〉を集めてみること。 そこで、日本語／英語に分けて、2つのマンダラート（9マスのメモ）をつくり、「図解」の類
伝わりやすいスライド資料の作り方。資料作成の流れからデザインのコツ、デザイン初心者さんにおすすめの本まで紹介｜fuyuna blog｜デザイン・ライフスタイル・キャリアについて書くデザイナーのブログ
センスがなくても大丈夫！デザインのコツを活用すれば、だれでも見やすくわかりやすい資料を作成できます。 イマイチな例といい例のスライド見本もご用意しているので、よければ参考にご自身のスライド資料をブラッシュアップしてみてください。 5. フィードバックをもらう資料のデザインが完成したら、上司や先輩に確認してもらいましょう。プレゼン資料は人に見てもらうことを前提として作るため、客観的な意見は重要です。 目的を果たせる資料になっているか内容がわかりやすいかプレゼンを通してどんな印象を受けるかなど意見をもらい、ブラッシュアップをしていきます。 このとき、PDF形式で書き出したものを確認してもらうと、より資料のクオリティが上がります。デザインの現場でもよくあることですが、PDFや印刷した資料を見ると、スライド作成時には気づけなかった誤字や脱字、表現の違和感などに気づけます。 PDFファイルの作成・共
明日からできる、爆速Figma活用術 - エムスリーテックブログ
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
10年越しの Web フロントエンドという職種界隈についての考 | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 10年越しのWebフロントエンド 最近更新していない 自分のブログ を遡ると「フロントエンド」という語の初出は 2010 年であり、転職のタイミングで自らを「Web フロントエンドエンジニア」と定義したのは 2012 年の頃でした。 それから 10 年、自分語りとして記憶をたぐることの老害仕草たるやですが、今回はそのノリのまま表題の通り Web フロントエンドという職種界隈についての考えを述べてみます。 Webフロントエンドとは一体... 先日、TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る でお話しする機会をいただいたので改めて自分の中の Web フロントエンドを言語化してみました。 イベント資料 より抜粋 いくら抽象化しても原則としては全てが HTML で表現さ
ZOZOTOWNホーム画面におけるパーソナライズの取り組み - ZOZO TECH BLOG
はじめに こんにちは、ML・データ部推薦基盤ブロックの寺崎（@f6wbl6）と佐藤（@rayuron）です。 ZOZOTOWNのホーム画面は2021年3月にリニューアルされ、「モジュール」と呼ばれる単位で商品が表示されるようになりました。 本記事ではユーザーごとにパーソナライズされたモジュール（以降、パーソナライズモジュール）のロジックやシステム構成、および導入時に実施したA/Bテストの内容と結果をご紹介します。 先に結論から言ってしまいますが、今回のパーソナライズモジュールでは機械学習モデルを使わず、ユーザーの回遊行動を分析した結果を元にしたルールベースのロジックを使用しています。本記事のポイントは大きく以下の3点です。 ルールベースのパーソナライズロジック 機械学習モデル導入を見越したシステム設計 ホーム画面のパーソナライズによる効果 本記事がこれから同様のタスクに取り組む方の参考にな
高齢者向けサービスにおけるUIデザイン｜『高齢者のためのユーザインタフェースデザイン』の書評
現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼：近く・遠くのものの焦点が合わない 周辺視野のぼやけ：画面の端に気づきにくい 中心視野の損失：画面の中央が暗
「デザインは才能の問題じゃない」デザインセンスがない…と感じている人がまずやるべきことを建築家が解説
堀井義博 @yoshihirohorii どんなものでも整然と並べるだけで「デザインされた」ように見える。 この認識は倒錯で、そもそも「並べること」がデザインなのだから、 何かが整然と並べられている状態は、デザインされたように見える は端的に同語反復である。 堀井義博 @yoshihirohorii この倒錯は、例えば列柱表現だとか、同じモチーフを整然と反復させるデザインだとか、ひたすら同じ材料で仕上げを統一するだとか、そういう類のものを見た時に お、デザインされてるな って思ってしまう感覚に、端的に現れる。
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
ウェブ・アプリエンジニアのためのFigma入門 (2) Figmaのキホン | さくらのナレッジ
前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
アウトドアやスポーツ、普段づかいまで。コスパ抜群の高機能ロングパンツ | ライフハッカー・ジャパン
ヘッドライトの黄ばみがサッとキレイに! メッキ・ホイール・シートにも使えるマルチ過ぎなお手軽クリーナー「ウルトライト」
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
Webの進化が止まらない！参考にしたい最新ウェブデザイン36個まとめ
従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。 ストーリーテリング手法やなめらかなアニメーション、美しい配色やセリフ書体を中心としたフォント選びなど、2019年に注目されているデザイントレンドを盛り込んだサイトを中心に揃えています。 サムネイルをクリックすることで参照元で移動できるので、ぜひ一度ウェブサイトを開いて、クリエティブな面白最新ウェブデザインを体験してみましょう。 Webの進化が止まらない！参考にしたい最新ウェブデザインまとめ Rally 制作実績を一覧にしたポートフォリオサイトで、アクセントになっている立体的なリボンエフェクトが展開しながら、視線をうまく誘導しながら次のコンテンツへ進みます。 Oranje Bitter Festival 2019 オランダで今月開催されるフェスのランディングペ
Webが進化中！参考にしたい話題の最新ウェブデザイン30個まとめ
デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験してみてはいかがでしょう。 【総まとめ】2018年印象に残った世界のベストWebデザイン厳選51個 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 Webが進化中！参考にしたい注目の最新ウェブデザインまとめ Tao Tajima スクロールの強弱に応じて、�3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています。 Kitamura Makura ま
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
