Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
プロンプトからサイトが作れる！？話題の「Create.xyz」を使ってみた！｜AICU media
Web サイト開発に関わる様々な AI 技術を提供しており、ノーコード Web 開発、Web サイトの情報の収集、ダッシュボード、LP 、サインインページの開発などがとても手軽に行える柔軟性の高いサービスとなっています。 メニュー画面。様々な機能があります今回は、様々なことができる Create.xyz の中から、基本的なレビューと「プロンプトを入力するだけでWeb サイトを作る機能」を実際に試してご紹介します！ 料金プラン気になる使用料金ですが、2024年4月13日現在では、無料で生成、20プロジェクトまでの保存が可能です。試しに何か数個プロジェクトを作るぐらいなら無料でできてしまいます。 プロプラン（月額19ドル）API を利用したり、ChatGPT 以外の強力なテキスト生成 AIモデルや、強力なエディター機能が利用できます。 使っている人のお話を聞く限りでは「Web制作を生業としてら
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
2024年3月の、これだけは押さえておきたいWeb関連の動き
2024年3月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma・UI Canva、Affinityを買収 Adobe対抗のデザインツール大手 個人的に注目のニュースだったので、記事を書きました。 CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である – Stocker.jp/diary Iconbuddy — 100K+ open source icons アイコン素材検索サイトです。 Figmaが生成AI機能を強化へ、アイデア出しや付箋の要約などをサポート／ディラン・フィールドCEOが「Figma」の今後の展望を語る 「UIの色を変えただけで大量のクレ
CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である
CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である ベクターグラフィックツール「Affinity Designer」写真編集ツール「Affinity Photo」などがCanvaに買収された件について、思うことをまとめています。メインビジュアルは Affinity team の写真です。 はじめに 2024年3月26日、CanvaがAffinityを買収したことが発表されました。 この買収は、AdobeがFigmaを買収しようとした時とは異なり、既に完了しています。 私は2019年頃から日本でAffinityの普及活動に携わってきていたので、ユーザーの方が心配しそうなことへの回答と、個人的にこの買収について思うことをまとめたいと思います。 ユーザーの方が心配しそうなことに対する回答 まず最初に落ち着いていただきたいのですが、Affinity開発元のSerif社
Webサイトのファーストビューに『動き』を取り入れるアイデア8選｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webサイトの顔とも言える「ファーストビュー」をより魅力的に見せるためのコツについて調べてみました。参考サイトもたくさん紹介しているので、ぜひ最後までお楽しみください✍ はじめに：ファーストビュー（FV）とは？Webサイトのファーストビュー（FV）とは、サイトを開いたときにスクロールせず見える範囲のこと。ユーザーにとってはいちばん最初に目に飛び込んでくる、Webサイトの第一印象を決める「顔」となる部分です。 （ちなみに「ファーストビュー」は和製英語で、英語では「Above the fold」と呼ぶそうです。） たとえば、家計簿プリカ「B/43」公式サイトのファーストビューは以下のようなデザイン。B/43のメリットを文章とカードによって端的に伝えながら、画面下部には利用シーンがわかる写真をカルーセルで掲載。一画面の中
Iconbuddy — 200K+ open source free svg icons
The ultimate source for icons.Download, Customize, Edit and Personalize. Over 200k+ open source icons.
XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
2024年1月の、これだけは押さえておきたいWeb関連の動き
2024年1月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 1月上旬はブログ記事が更新されづらいため、今月は記事が少なめです。 HTML・CSSコーディング Tailwind CSSを使う時の疑問と解決方法 2024年のCSSの書き方、ワークフローとツールについて あっ、そうだ！モダンCSSをまとめておこう HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する デザイン・フォント 無料でダウンロードできるフォントを書体や見た目のイメージから検索できる「モジザイ」 知識０から、ちょ
2023年12月の、これだけは押さえておきたいWeb関連の動き
2023年12月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma Adobe、Figma買収を撤回 欧州で当局の承認見込めず – 日本経済新聞 買収に必要な承認が得られないため、AdobeとFigmaは相互に買収契約を破棄することで合意したとのことです。AdobeはFigmaに対して違約金を支払うとのこと。 Figma公式Webサイトによると「FigmaとAdobeは、提案されていた合併を中止することにしました。」とのことです。 画像のALTに、ChatGPTによる日本語の要約をまとめたものを入れています。https://t.co/d1otCUX3LI pic.twit
WordPressブロックテーマで一新された、ブログデザインと制作フロー
WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加
2023年11月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2023年11月の、これだけは押さえておきたいWeb関連の動き Friday, December 1st, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma Adobeによる3兆円規模のFigma買収についてEUの規制当局が独占禁止法違反で訴訟を起こす予定だと判明 「EU当局はこの買収が、大企業が競合他社を排除するために中小企業を買収する『キラー買収』であるとの懸念を強めています」とのこと。 AdobeはFigma
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Image credit: Relume ワンセンテンスの Web デザインは、もはや夢物語ではない。Wix、Weebly、Webflow のテンプレートを使えば、自分のスタイルで Web サイトを組み立てることができる。 しかし、これはレイアウトに限ったことではなく、Web サイトの構成を考え、各ページの内容も、訪問者を惹きつけるために慎重に設計する必要がある。例えば、「About」ページでは、サービス紹介やビジネスストーリー、将来のビジョンなどを掲載するため、コンテンツの設計に手間がかかる。 この問題を解決するために、デザインスタートアップ Relume は、AI が生成する Web サイトデザインプラットフォーム「Relume Ipsum」を開発した。これにより、数週間から1ヶ月程度かかっていた Web サイトを完成させるまでの作業負荷をわずか数分にまで軽減することができる。このプロ
新JavaScript基礎講座（動画講座）受講生募集中！
この講座は、HTMLやCSSの基礎を既に学んだ方を対象としたJavaScript入門講座です。 古いJavaScriptやjQueryは使用せず、最新のJavaScriptの基礎を学びます。 その後、制作物としてメニューボタン付きナビゲーション、タブ切り替えのUI、スライダー（カルーセル）を作成します。 制作物の動作例など、詳しくは以下の動画（音声あり）または、その下のテキストをご覧ください。 講座の内容と価格について この講座には、JavaScriptの基礎 + 3つの制作物を作る実習 + 特典映像が含まれています。 基礎と実習の動画は合計約5時間、特典映像が約30分です。 JavaScriptの基礎 変数と定数 関数 条件分岐 ループ処理（Webページ上の複数の要素に対してそれぞれ処理をする） HTMLの特定の要素にclassを付けたり外したりする 制作物 スマートフォンサイトでメニュ
2023年7月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UI・Figma Adobeの2兆8000億円超でのFigma買収についてEUの規制当局が間もなく詳細な調査を開始 アメリカ司法省は独占禁止法違反の疑いでAdobeを提訴する準備を進めています イギリスはAdobeが独占禁止法違反に関する救済策を提示しなかったため、より長期的な審査を開始すると発表 とのことです。ひょっとしたら、Figma買収完了までに一悶着あるかもしれませんね。 デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう！ Figmaを通じたデザインの始め方について書かれています。 UIは閲覧画面からつくろう。｜Shino | Software Desi
Photoshopの「生成塗りつぶし」はWeb制作の現場で使えるのか
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 生成塗りつぶしとは 生成塗りつぶしとは、2023年6月に発表されたPhotoshopの新機能です。 発表された当初は［ジェネレーティブ塗りつぶし］という呼び方をされていましたが、この記事の執筆時点では［生成塗りつぶし］という名前に変更になっています。 この新機能はPhotoshopデスクトップ(Beta)版でのみ使用できる機能なので、通常版のPhotoshopとは別にBeta版の
またまたデジタル庁(試行版)のサイトが見やすすぎな件について - Qiita
はじめに これの第二弾といいますか、この記事が大変評価されてから毎日Twitterで「デジタル庁」と検索するくらいに自分大好き人間なんですが、突如としてデジタル庁から試行版のサイトが掲載されました。 このページについて、自分なりに分析していきたいと思います。 Gridが綺麗すぎてもはや変態 またもやデジタル庁はやってくれました。この変態すぎるぐらい綺麗な12カラムグリッドデザイン。現行版よりもさらにやばいです。(Chromeを使ってる方は、デベロッパーツールから、要素を見ていって「grid」というボタンが見つかったらクリックするとgridが表示されます） 12という数字がなぜいいのかというと、等分にしやすいからです。2等分にも3等分にも4等分にもできます。また昨今はデバイス幅が多様なので、単なるpx指定にすると、このデバイスでは見にくいなどのことが発生します。しかしグリッドレイアウトにすれ
2023年6月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 デザイン・UI・Figma Adobeによるデザインツール「Figma」買収についてEUが独占禁止法違反の調査実施へ 最終的には買収の合意が頓挫する可能性もある とこの記事を引用してツイートしたところかなり反響がありました。 私は、おそらくFigmaは買収されるとは思っています。ただ、Adobeの想定より時間がかかったり面倒なことになる可能性はあるかもしれません。 Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 – ICS MEDIA UIは閲覧画面からつくろう。｜Shino
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustrator の「テキストからベクター生成（AI生成機能）」で、統一感のあるアイコンを制作する方法
