Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
「デザイン白書2024」を公開
公益財団法人日本デザイン振興会は、各都道府県や企業、行政などのデザインに関する多様な取り組みを網羅的に取りまとめたレポート「デザイン白書2024（WHITE PAPER ON DESIGN 2024）」を2024年6月4日（火）に公開しました。 背景・経緯 経済産業省と特許庁は2018年に『「デザイン経営」宣言』を発表し、日本の産業競争力強化のために、デザインを企業価値向上のための重要な経営資源として活用する「デザイン経営」を推進することを提言しました。その後、大企業や中小企業、スタートアップ、官公庁などでデザイン活用が進み、経済産業省デザイン政策室はデザイン活用をさらに拡大するために、2023年に「これからのデザイン政策を考える研究会」を開催しました。研究会では、2023年度・2024年度グッドデザイン賞審査委員長の齋藤精一氏が座長を務め、当会からは深野弘行理事長、柴田文江理事、田川欣哉
デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
Adobeツールの乗り換えを検討し始めたけど、 「どこで見つければいいの？」「どんなツールを選べば後悔しない？」「代替ツールのいいところって何だろう？」「乗り換えのタイミング今なのか？」「費用の違いはどのくらい？」 普段から利用するツールだからこそ、自分にとって最適なデザインツールを知りたい方向けのリストとなっています。 Adobe Creative Cloudソフトから乗り換えたいと考えているひとへ どんな代替ツールがあるか知りたいひと いろいろツールを見たけどピンとこないひと 自分にあったツールが知りたいひと 代替ツールへの乗り換えで失敗したくないひと 目次Photoshopの代替ソフトIllustratorの代替ソフトPremiere Proの代替ソフトAfter Effectsの代替ソフトAdobe Creative Cloudの代替ツール Photoshopの代替ソフト 1. A
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは！せきゆおう です。 游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
こんにちは！株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「生成AI」はほぼ初めて！というWEBデザイナーの方が、業務で使える活用術をご紹介します。 まずは基本的な使い方の習得を目指しましょう！ 今回は主にChatGPTを使った業務の効率化方法をお伝えします。 私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね！ 1. 生成AIを使うリスクとは？はじめに、生成AIを使う上での注意点をお伝えします。 漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。 主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。 1. データの
line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
みなさんは日本語の文字の並べ方に「ベタ組」「ツメ組」という言葉があることをご存じでしょうか？ 実は日本語の文章は、読み手を意識して読みやすい間隔で文字が並べられています。 今回はそんな日本語の文字の並べ方をご紹介します。 ベタ組とツメ組「ベタ」という言葉の意味は「隙間なく物が並んでいること」だそうです。そういえば印刷用の絵や漫画の黒一色で隙間なく塗った部分を「ベタ」とも言っていますね。他にも「ベタ」は建築業界の⽤語にもあるようです。 まずは日本語組版にもある「ベタ」を説明する前に、文字の設計についてお話しします。 日本語で使われる漢字やひらがな、カタカナは一般的に正方形に収まるように設計されており、この正方形に相当するところを「仮想ボディ」と呼んでいます。そして「仮想ボディ」の中に実際の文字部分である「字面」が収まっています。 仮想ボディと字面。pt? 級? 号? 文字に関する単位の話より
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
ヒアリングに行くのではない。最初から価値を与えること。これは、プロジェクトの初期対応でデザイナーが取るべき基本的な態度です。 今回のテーマは、デザインの初期対応。その効果的な動き方を紹介します。 デザインプロジェクトのスタートは、他者から依頼を受ける場合と、デザイナー側から提案を始める場合の２つのパターンがありますが、今回はそのうちの「デザイナーが依頼を受けるパターン」について。 初期対応の時点で、デザインの成果の半分は決まってしまいます。それくらい重要なものですが、なせかデザインの世界ではあまり論点化されていません。自分の経験が何かの役に立てばとの期待を込めて。どうぞ。 ヒアリングじゃない。ディスカッションだ。依頼や問い合わせを受けてデザイナーが初期対応すること。これをヒアリングと呼ぶこともありますが、それには注意が必要です。 最初に関係性が固定されるヒアリングに行く。情報を聴きに行く。
Abletonのシンセ入門サイト、音も出せるしわかりやすすぎる2024.06.02 21:0017,553 ヤマダユウス型 ｢シンセサイザー、名前も見た目もかっこいいけど複雑そう｣ そう感じたことがある人にぜひ知ってもらいたい、シンセ知見の塊みたいなサイトを見つけました。コチラです。 このサイト、音楽制作ソフトやハードウェアを手掛けるAbletonが作ってるみたいで、なんと実際に演奏ができるんです。しかもスマホでアクセスすると、タッチで演奏もできてしまう！ シンセサイザーの仕組みをサウンドと一緒に解説実際にサイトを訪れてみると、テキストと共に操作できるスペースが用意されています。たとえば上の画像だとドラッグできる下画面をクリックすると、ビヨンビヨンとシンセらしい音が出ます。 こういったシンセらしい音はどんな仕組みで動くのか、どんな要素で構成されているのか。音と一緒に理屈でも解説していきます
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回のテーマは「GPT4oを活用したウェブサイトづくり」です。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は先日OpenAIが発表した新たなAIモデル「GPT-4o」を使ってウェブサイト（LP）を作成してみました。GPT-4oのパフォーマンスを知ること、そしてデザイナーが生成AIとどう関わっていくべきかを探るきっかけにすることが、今回の目的です。 前提として「GPT-4o」がゼロベースでウェブページを作成することに向いているツールではないと思いますが、チュートリアルの要素と今後の可能性を知るためにあえて取り組んでみました。 GPT-4o
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今日は、私がnoteを執筆するときに意識しているポイントを書いてみます。誰でも・いつでも・すぐに再現できるよう紹介していくので、ぜひご活用ください🕺 ちなみに、普段はこんなnoteを投稿しています👇 今回のnoteでは、とくに「noteの書き方」にフォーカスしていますが、テキストコミュニケーションを考察した以下のsakinoさんのnoteにも影響を受けています。 はじめに突然ですが、以下のnoteはどちらが読みやすいですか？ このように尋ねられると、多くの人が「B」を選んでくれるのではないでしょうか（という前提で話を進めます）。 では、どうしてBが「読みやすい」と感じるのか。 わたしは、文章が「デザイン」されているからだと思っています。 読みやすい文章は「デザイン」されているそもそも「デザイン」って何を指してるの？というと
こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
デザインツールとしてのCanva -バナーだけにとどまらない多様な活用法
デザインツールとしてのCanva -バナーだけにとどまらない多様な活用法 Canvaは広告バナーだけでなく、SNS投稿用の動画、チラシなどの印刷物、プレゼン資料、 Webサイトのデザインなど幅広い用途に利用できます。 この記事では、Canvaの幅広い用途について解説します。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 Canvaの概要 Canvaは、デザイン初学者からプロフェッショナルまで幅広いユーザーに対応するオンラインデザインツールです。 デスクトップアプリの他にブラウザでも使うことができ、デバイスを選ばないので、PCで途中まで作業していたものを出先でスマホで引き続き作業も可能です。 Canvaはテンプレート、使用できるフォント、
最近、「Webデザイナーのかりん」を名乗る者（以下「情報発信者」といいます。）が、「かりんのWEBデザイン学習帳」と題するブログやSNS上において、Webデザインの学習サービスについて発信しております。当社は、この情報発信者について、合同会社アクシス（所在地：東京都港区浜松町二丁目２番１５号浜松町ダイヤビル２Ｆ。現代表社員：松井颯人。旧商号：合同会社cyber base）の当時代表社員であった鈴木七海氏であるとの情報に接しました。 情報発信者と当社との関係に関して確認のお問い合わせをいただいておりますが、当社の保有するコンテンツについて、現在及び過去において当社が情報発信者に対して何らかの権利を譲渡し、又はその利用を許諾した事実は一切ございませんことをお知らせ申し上げます。
最近の若者はパソコンが得意だと一括りにされる傾向があります。実際、今の４０代以降の人と違って、大なり小なり学校の授業でパソコンを使う経験があるので、彼らと比べれば慣れてはいるでしょう。 しかし、それで面接の時なんかにパソコンが使えると認めてしまうと、後からとんでもないことになりかねません。 今回の記事では、筆者の実際の経験を交え、企業側が以下にパソコン使えますをハードルの高いものに設定しているのか解説していきます。 企業が求めるパソコンスキルとは オフィススキル Webサイト作って 会社の業務管理システム作って まとめ 企業が求めるパソコンスキルとは オフィススキル これはまあ序の口でしょう。学校の授業でもなんどか触れることがあるでしょうし、ワードエクセルパワーポイントの三点は当たり前に習うと思います。 筆者も当然これは習っていたし、会社のデータを纏めたり文書作成やプレゼンテーションの資料
React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
偶然の出会いから始まったSEOコンサルタントの道。アユダンテ・江沢真紀に聞く日本のSEOの課題 - ミエルカマーケティングジャーナル
様々な領域の「知」を求めて、有識者の皆さんと対談する連載「 #知の探索 」。インタビュアーは、当社の本田卓也が務めます。今回のゲストは、国内におけるSEOコンサルティングの先駆的存在である、アユダンテ株式会社のSEOコンサルタント、江沢真紀さんです。 アユダンテ社の創業メンバーでもあり、2001年よりSEOに携わり続けている江沢さん。これまでに手がけた100サイト以上のプロジェクトで、多くの成果を出してきました。また、SEOを学ぶ定番書『いちばんやさしい新しいSEOの教本』の著者としても活躍しています。 そんな江沢さんとSEOとの出会いは、まさかの偶然によるものでした。過去のエピソードを紐解きつつ、江沢さんが思うSEOの面白さ、現在のSEOが抱える課題などを伺いました。 （執筆・撮影：サトートモロー 進行・編集：本田卓也） Webデザイナー志望からのSEOとの出会い 本田： 江沢さんとは以
iPad Pro (M4)はUltra Retina XDRディスプレイの採用により、11インチモデルでもプロクリエイター向けの正確で一貫性のある色を再現する「リファレンスモード」が利用でき、SideCarを使えばMac用のリファレンスモニタとしても利用可能。
iPad Pro (M4)はUltra Retina XDRディスプレイの採用により、11インチモデルでもプロクリエイター向けの正確で一貫性のある色を再現する「リファレンスモード」が利用でるようになっています。詳細は以下から。 Appleは日本時間2024年05月15日、Apple M4チップとタンデムOLEDテクノロジー採用のUltra Retina XDRディスプレイを搭載した新しい「iPad Pro 11インチ/13インチ (M4)」モデルの販売を開始しましたが、 このiPad Pro (M4)シリーズでは全てのモデルにUltra Retina XDRディスプレイが搭載されたことで、11インチモデルでもデジタルシネマ編集や高解像度写真、Webデザイン、出版物の編集などの正確で一貫性のある色と画質を必要とするプロクリエイター向けの「リファレンスモード」が利用可能となっています。 Ref
Instrument | Digital marketing, branding and product experiences | Instrument
こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 ChatGPTの新モデルで「ブラウジング機能（インターネットから最新情報を取得して提供する機能）」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTにヒューリスティック診断してもらうことができるのでは…？と思って試した結果や実際に使用したプロンプトをご紹介したいと思います！ ※ヒューリスティック診断：ウェブサイトやアプリのUI・UXを特定の評価基準に基づいて分析し、潜在的な問題点や改善点を特定するもの ChatGPTのヒューリスティック診断結果実際にChatGPTで行ったヒューリスティック診断結果がこちら！ 今回はアジケのサイトで診断をしてみましたが、きちんとウェブサイト上の情報を参照した結果が
はじめてのアプリUIデザイン。フローやWebサイトとの違いを解説します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ 最近Webサイト制作だけではなく、アプリ開発にも携わることが増えてきました。 その中で「Webサイト制作に似ているな〜」と思ったり、「あれ、ここは違う！」といった気づきがたくさんありました。前職ではソーシャルゲームのUIデザインを担当していましたが、Web業界に転職したときも、まったく同じことを思ったのを覚えています。 今回は、Webデザイナーの方がはじめて「アプリのUIデザイン」をするときに必要な知識や考え方、意識したほうがよいことを、フェーズごとにまとめてみました。 アプリにおけるUIデザインとは そもそも「UI」とは、ユーザーインターフェース（User Interface）の略で、日本語では「ユーザーとの接点・接触⾯」という意味になります。 UIはユーザーの目に触れ使用する部分すべてを指し、このUIを通してコンピューターとユーザーは情報のやりと
本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます！ 最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。 デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。 Create.xyzで出来ることCreateを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。 プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。 基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください！⬇️ と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあ
株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「課題解決力」UPのために、日頃意識している事について書いてみました。 ビジネスパートナーとしての心構えこれまで、WEB制作やマーケティング支援を通じて、課題解決に取り組んできました。しかし、クライアントの中には、WEBサイトの作成やSNSアカウントの設立が目的化してしまうことがあります。 そのような場合、課題を整理し、本当に実現したいことを一緒に探り、具体的な提案に落とし込むことが重要です。単なるデザイナーの枠にとらわれることなく、ビジネスパートナーとして全体を俯瞰し、信頼と成果を得るために、日頃から課題解決力を鍛えることを心がけています。 今回は、課題解決力を高めるために、普段から意識している考え方をnoteにまとめました。 そ
みなさん、こんにちは。 株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 今回はUIトレースの方法についてお話したいと思います。 未経験からデザイナーとして駆け出した私は、学習の一環として UIトレースに取り組んでいます。 私のように初学者の方のお力になれればと思い、ここにまとめます。 UIトレースとは？UIトレースとは既存のアプリやサービスの画面を真似してデザインする事です。私はFigmaを使い、トレース元となる画面のスクショを隣りに置いてトレースしています。 サイズ感や余白のとり方を学んだり、デザインツールの基本的な操作に慣れるためにもおすすめの学習方法です。 トレースすることの目的トレースを始めた当初の目的は、同じ見た目のものを作ることでした。 しかし、どのような構造なのかオブジェクトの持つ意味を考えながらトレースすべきだったと反省しています。 この余白はどこに属してい
UI/UXデザイナーがなくなるといわれる理由や将来性をプロが解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。Webデザインスクール「デジLIG」でクリエイターを目指す受講生のメンターや転職サポートを行っている久保です。 デザイナーのなかでも高度なスキル・考え方が求められるUI/UXデザイナーという職業について、「今後なくなる？」と噂されている背景とその真意についてまとめてみました。 本記事では、プロの目線でUI/UXデザイナーの仕事が本当になくなるのか解説していますので、ぜひ最後まで読んでみてください。 最近、「UI/UXデザイナーは将来なくなってしまう」ということがいわれています。 はじめに断言しておきますと、答えは「NO」です。 ではなぜ高度なスキル・考え方が求められるUI/UXデザイナーという職業がなくなるといわれているのでしょうか。理由は大きく2つあります。 AI技術の発展 理由の一つ目はAIなど革新的な技術進歩により「自動で簡易的にデザインが作られるようになる＝人の考えたデ
目の疲れをとる方法 『ＷＥＢデザイン』の学校に通って習得した知識と技術を活かし、福祉関連の現場で頑張る職員の方々を応援する為のＷＥＢサイト『福祉のお手伝い』を作成し運営しております。 無料画像やお役立ち情報の提供をしておりますので、下記のＵＲＬからぜひご覧ください。 無料画像提供サイト『福祉のお手伝い』 n-a-creation.hateblo.jp 今回はそのサイトの『健康情報』より、特別な準備がなくても簡単に実施できる『目の疲れをとる方法』をご紹介します。 普段から目を酷使していて、気づかぬうちに身体が凝り固まって様々な不調を感じているという方は多いのではないでしょうか。 そんなお疲れの方々のケアに活用していただければと思います。 また、以前ご紹介した記事は下のリンクからご覧いただけます。 www.n-a-creation.com ページ下方のボタンからは他のページにもジャンプできます
Webデザインに必須のコーディングの基礎知識【初心者向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デジタルエデュケーション部の田中天（@10TEN10TAN10）です。現在、私はデジタルハリウッドSTUDIO by LIG（通称：デジLIG）の運営を担当しています。 みなさん「コーディング」ってどんなイメージを持っていますか？ Web制作に必要なもの？ ずらずらと英語や数字が並んでいるもの？ なんだか難しそうなコーディングですが、コーディングを行いWebサイトに動きを付けることで、ユーザーを楽しませてサイトの滞在時間を伸ばすことができたり、リピート率を高くしたりもすることができます。 本記事では、そもそもコーディングとはなにをすることなのか、どんなときに必要になるのか、そして学ぶことのメリットをご紹介します。この記事を通して少しでもコーディングと仲良くなれればと思っています。 Webデザインのコーディングとは？ 必要なの？ Web制作において、見た目のデザインだけをしても、
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
【乗り換え】Adobeソフトに代わるベストな代替ツールはこれ【早見表つき】
ウェブサイト制作では、游ゴシックはおすすめしない理由
Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
WEBデザイナー向け！はじめての「ChatGPT」で業務効率化をするヒント｜toto｜Rabee.inc
ベタ組とツメ組。日本語の文字の並べ方を押さえよう｜モリサワ note編集部
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
ヒアリングを超えていく、デザインの初期対応｜大﨑 優｜CONCENT
Abletonのシンセ入門サイト、音も出せるしわかりやすすぎる
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
UIUXデザイナーが「GPT4o」を活用してウェブサイトをつくってみた
デザイナーが考える『読みやすい』noteの書き方｜akane
ページに抑揚をつける「背景切り替え」のデザインアイデア｜nanami
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
Webデザインコンサルタントを名乗る事業者と当社との関係につきまして
企業が求めるパソコン使えますとはなんでもできることである - 格安ガジェットブログ
codefolio | Webコーディングの参考になるパーツ集・ギャラリーサイト
ChatGPTにヒューリスティック診断させてみた｜Dods｜UIUX改善支援
【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう｜ChatGPT研究所
Webデザイナーが実践する「課題解決力」UPのヒント！｜toto｜Rabee.inc
UIトレースの方法-UIの構造を理解しよう-｜koppi
『福祉のお手伝い』より Vol.18 - ~Many kinds~ いろいろだからオモシロイ
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita