ブログや技術記事で使いやすい画像素材を配布します

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

デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法

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

Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催します

Web制作の基礎から学べる「Webコーディングスクール」

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

Adobe XDは利用できなくなるのか、Adobeに問い合わせました

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

AI描画ソフト「Stable Diffusion」はWeb制作の役に立つか?

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

AdobeのFigma買収とAdobe XDのこれから

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

Adobe XDで無料のスタータープランを使い続ける方法

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

画像で分かる日本語フォントと欧文フォントの基礎

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

業種や雰囲気による配色の決め方

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

フォントワークスがGitHubで無料公開しているフォントをPhotoshopなどで使ってみよう

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

「スマートフォン時代のWebデザインスクール」がご自宅で動画受講できます

スマートフォン時代のWebデザインスクール

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

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

CSSで三角形のいろいろな実装例

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

Photoshop・Lightroomの新機能「スーパー解像度」が使える場合と使えない場合について

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

Webデザインツールはどれを使えばいいの?

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

Webデザイン初心者がつまづきがちな共通点

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

CSSのテキストマスクで映えるメインビジュアルを実現

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

Photoshopの「覆い焼き」や「なげなわ」って何?という話

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

「Webデザイナーはコーディングできるべきか」という議論に対する私の考え

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

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

「Web制作に役立つIllustrator入門講座」という無料講座を開催します

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

フィルムカメラで撮影した写真を自分で現像・プリントしてみた

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

年末年始にWebデザインを学び直すための3つのステップ

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

うわっ、日本のWebデザイナーの年収、低すぎ…?

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

Affinity User Group JAPANミーティング3の内容まとめ

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

私が「Web制作にはMacが適している」と思う理由

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

Webデザイナー目線で見たiPad版Photoshopの驚きの完成度について

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

Affinity User Group JAPANミーティング2の内容まとめ

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

モダンなFireworks後継アプリは存在するか?

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

Affinity Designerを動画に活用、Sketch, Figmaとの使い分けなどイベントの登壇内容まとめ

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

Affinity Publisherを最強のプロトタイピングツールとして使うために知っておきたいこと

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

Affinity製品を使用しているWeb制作者のインタビュー動画と最近のユーザーグループの活動について

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

PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売

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

「CS6以降のアプリがいつでもすべて使える」という売り文句のAdobe CCで過去のアプリが使えなくなった件

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

書いて覚えるSVG: 基礎編

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

写真素材の「ぱくたそ」にイタリアや熊本の写真を寄贈しました

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

SVGの最適な書き出しのためにやった方が良いこと、やらない方が良いこと

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