この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H

ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは

2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧

2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで

この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac

先日 iMac 2019のレビュー記事 に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。 先に、Web制作のためにWindows PCを買った方のために説明しておきますが、Windows PCでもWeb制作はできますのでご安心ください。 ただ、私はいくつかの理由でWeb制作にはMacの方がメリットが多いと感じています。 私がMacでWeb制作するようになったきっかけ 私はWindows 95の頃からWindows PCをずっと使用していました。 Windows 95や98の頃はMacでWeb制作するメリットを感じておらず、多くのWebサイトを問題なく閲覧できるWindows PCがベストだと思っていました。 その後Windows XPやWindows Vistaが搭載されたPCをメインで使用してい

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク

この記事は、2019年に突然Adobe CCの過去バージョンが利用できなくなった件についてまとめた記事です。 このスクリーンショットはAdobe Creative Stationより。現在 記事は削除されています が、インターネットアーカイブ で見ることができます。 何が起きたのか 箇条書きでかいつまんで書くと以下のような感じです。 Adobe Photoshopのようなアプリケーションは毎年メジャーアップデートされ、たとえば2012年はCS6、2013年はCC、2014年はCC 2014のようなバージョン番号が付けられています。 Adobe CCは月額制のデザイン系アプリケーションが使い放題になるサービス月額サービスのAdobe CCに加入すると「CS6以降（CS6を含む）のアプリがいつでも全て使える」という売り文句で有料会員を集めていたところが2019年5月9日頃、突然2017年やそれ

私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで

MacBook Pro 13インチ Touch Bar モデル（Late 2016）を11/17から使用し、3週間ほど経過したのでレビューを書きました。 MBPの購入を検討している方で、特に「Touch Barってどういうものだろう？不便はないのだろうか？」とか「USB端子が変わったことによるメリットとデメリットは？」という事が気になる方に参考になるように書いています。約15,000文字あります。 Touch BarとUSB-Cについて多くの人が誤解していること レビュー本文の前に、まず大手メディアが報じているMacBook Pro、Touch Bar、USB Type-C（以下USB-C）に関する記事を読んでいると、明らかにまともにMacBook Proを使用せず書かれているとしか思えない、間違いだらけの記事や質が低い記事が多すぎます。 例えば 以下のようなことが書いてある記事は完全に間

このブログをお読みの方には既に不必要かもしれませんが、XHTML 1.0 と CSS 2.1 の入門記事です。 社会人のためのWebデザインスクール 用に作成したプレゼン資料をもとに記事にしています。 授業の時は、先にこの話をしてから XHTML を書いてもらうのではなく、先に HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる を読みながら XHTML と CSS で簡単なページを作成してからこの話をしています。 その理由としては、HTML や XHTML を1度も書いたことがない方に「ブロックレベル要素」や「インライン要素」、CSS の「セレクタ」等の話をしても何のことか分かりにくいだろうと考えているからです。 ※この記事は2012年に執筆したものです。現在の 社会人のためのWebデザインスクール では、HTML・CSS コーディングについては