Webデザイン

今メルマガ登録頂くと、毛糸風の画像素材を配布します。
220枚以上あり、ブログや技術記事などで使いやすいと思います。

デザインシステムの基本原則を学び、Figmaで効率的なWeb制作方法を初心者にもわかりやすく解説する記事です。

Web制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを学べる社会人向けのスクールです。

2023年1月下旬Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。
そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。

最近AIによる描画ソフトがかなり熱くなっており、その中でも特に「Stable Diffusion」はWeb制作者にとってもインパクトが大きく、使い方によっては制作の役に立つかもしれないと思っています。

2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困 …

Adobe XDで無料のスタータープラン版のダウンロードが困難になりましたが、現時点でダウンロードする方法についてまとめています。

この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。
Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。

emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事ではWebデ …

emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事では、 …

「スマートフォン時代のWebデザインスクール」は、現在動画受講が可能です。初回体験レッスンも受講可能です。

Adobe XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。

三角形や矢印をWebページに取り入れる方法として、PNGやSVGなどの画像のほかにCSSを使う方法があります。この記事ではその実装例を紹介しています。

この記事ではPhotoshopの新機能「スーパー解像度」を試し、他社の機能と比較した場合のメリットやデメリット、使えるケースと使えないケースについてまとめています。 「スーパー解像度」は記事執筆時点ではPhotoshop …

emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのため …

Webデザインを学習中の方のレビューをしていて、いくつか共通のことがあることに気づいたのでまとめてみました。

「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。

Photoshopを初めて使う方にとって、効果がわかりにくいツールはたくさんあると思います。 その中でも、「覆い焼き」「焼き込み」「なげなわ」ツールは特に効果がわかりにくいツールではないでしょうか？ この記事では、そもそ …

過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。

かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。

Illustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。

フィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。

この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※ …

以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。
「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで記事にまとめました。

2019年12月に開催された「Affinity Designer」「Affinity Photo」「Affinity Publisher」の勉強会の内容のまとめです。
登壇内容の動画やスライドが中心です。

先日iMac 2019のレビュー記事に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。

Adobe CCを基礎から学べる「スマートフォン時代のWebデザインスクール」を渋谷で開講します 「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールをご自宅で動画受講可能です。 Photosh …

2019年9月に開催された「Affinity Designer」「Affinity Photo」「Affinity Publisher」の勉強会の内容のまとめです。 登壇内容の動画やスライドが中心です。 Affinity …

この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFireworks 2Jから使用していますが、最近使 …

この記事は、2019年7月に開催した「Affinity User Group JAPANミーティング #1」での大嶺 建さんと勝谷 元気さんの登壇内容の動画等をご紹介します。 Affinity Designerで簡単Yo …

この記事では主に以下の内容について書いています。
・Affinity PublisherによってWebデザインのワークフローがどのように改善するのか
・「Affinityは軽い」と言われるが、軽いと何が良いのか
・おすすめの環境設定
・脱Adobeへの第一歩

Affinity User Group JAPANの活動として、Affinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したのですが、その際撮影のお手伝いをさせていただきました。

ここ最近はたった1つのアプリでWebデザインを完結させるワークフローを実践していますが、とても快適なのでその方法についてこの記事で紹介したいと考えています。
このワークフローは現在WindowsおよびMacで実践可能です。今後iPadでもできるようになるはずです。

正直タイトルの時点でひどすぎると感じていますし、このような記事を書くのは本望ではないのですが、これを許してはいけない、受け入れるわけにはいかないという気持ちがどうしてもありますので記事を書くことにしました。

この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。

写真素材のぱくたそに、イタリアや熊本の写真を寄贈しました。
既に公開されていますので、よろしければご利用ください。

SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。
この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。