デザインツールとしてのCanva -バナーだけにとどまらない多様な活用法 Canvaは広告バナーだけでなく、SNS投稿用の動画、チラシなどの印刷物、プレゼン資料、 Webサイトのデザインなど幅広い用途に利用できます。 この記事では、Canvaの幅広い用途について解説します。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 Canvaの概要 Canvaは、デザイン初学者からプロフェッショナルまで幅広いユーザーに対応するオンラインデザインツールです。 デスクトップアプリの他にブラウザでも使うことができ、デバイスを選ばないので、PCで途中まで作業していたものを出先でスマホで引き続き作業も可能です。 Canvaはテンプレート、使用できるフォント、

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 生成塗りつぶしとは 生成塗りつぶしとは、2023年6月に発表されたPhotoshopの新機能です。 発表された当初は［ジェネレーティブ塗りつぶし］という呼び方をされていましたが、この記事の執筆時点では［生成塗りつぶし］という名前に変更になっています。 この新機能はPhotoshopデスクトップ(Beta)版でのみ使用できる機能なので、通常版のPhotoshopとは別にBeta版の

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 これはAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 Webデザイン・UI 文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦 | Yahoo! JAPAN Tech Blog Yahoo! JAPANの調査によると、文字17pxと行間1.6 付近が読みやすいと感じる方が多いようです。 AdobeのジェネレーティブAI Photoshopの「ジェネレーティブ塗りつぶし」は、現時点ではPhotoshopベータ版のみの機能ですのでご注意ください。 写真の余計なものを削除したり、写真の周囲を描いたりといった用途にはとても向いているようです。 詳しくは記事

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学

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のすべての製品一覧

過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ

先日、Google検索結果でこのブログが表示されたときに「モバイルフレンドリーではありません」という表示が出ていることに気づきました。 気になって以下のページにURLを入力して調べたところ、WordPressのプラグインから出力されているCSSがGoogleにインデックスされないようブロックされており、それによってレイアウトが崩れてしまったようです。 モバイル フレンドリー テスト – Google Search Console この記事では、そのような場合の対処法について書いています。 対処法 最初に結論を書くと、昔から使用しているWordPressの場合、WordPressインストールしたフォルダー（ディレクトリ）にある robots.txt というファイル内に以下のように書かれている場合があります。 （最近新しくインストールしたWordPressではこの行はないはずです） Disal

先日 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をメインで使用してい

この記事は、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年やそれ

SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて

この記事は、まだまだPHP 5系でWordPressを使用している方が多いため注意喚起として書きました。 先日Twitterでアンケートをとったのですが、PHP 5系が2018年末でサポート終了するということはあまり知られていないようです。 WordPressを利用されている方向けのアンケート: PHP 5.xは2018年内でサポート終了することを知っていましたか？ Twitter Webやアプリの投票機能でご回答ください。 — なつき@Webデザインスクール土曜開催 (@Stocker_jp) 2018年12月15日 ※ここで言うサポート終了というのは電話サポートのような意味ではなく、「セキュリティアップデートがなくなる」ということです。 たとえば、2014年にWindows XPのサポートが終了した時のように、今後使用し続けるのが大変危険であるということを指しています。 それぞれのバー