2023Web制作の基礎から学べる「スマートフォン時代のWebコーディングスクール」5月に初回体験レッスン開催!渋谷でも動画でも受講可能です。Macライフハックブログや技術記事で使いやすい画像素材を配布します今メルマガ登録頂くと、毛糸風の画像素材を配布します。220枚以上あり、ブログや技術記事などで使いやすいと思います。デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法デザインシステムの基本原則を学び、Figmaで効率的なWeb制作方法を初心者にもわかりやすく解説する記事です。Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催しますWeb制作の基礎から学べる「Webコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを学べる社会人向けのスクールです。XDが消えたことでWeb制作者の間で大きな騒ぎになっています。そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。Diffusion」はWeb制作者にとってもインパクトが大きく、使い方によっては制作の役に立つかもしれないと思っています。XDのこれから2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。XDで無料のスタータープラン版のダウンロードが困難になりましたが、現時点でダウンロードする方法についてまとめています。画像で分かる日本語フォントと欧文フォントの基礎この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。業種や雰囲気による配色の決め方emiと申します。emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。...フォントワークスがGitHubで無料公開しているフォントをPhotoshopなどで使ってみようemiと申します。emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。...「スマートフォン時代のWebデザインスクール」がご自宅で動画受講できます「スマートフォン時代のWebデザインスクール」は、現在動画受講が可能です。初回体験レッスンも受講可能です。XDをはじめ、新しいWeb技術やデザインワークフロー、新しい端末などに対応するため、授業内容はリニューアルし新しい内容となっております。三角形や矢印をWebページに取り入れる方法として、PNGやSVGなどの画像のほかにCSSを使う方法があります。この記事ではその実装例を紹介しています。Photoshop・Lightroomの新機能「スーパー解像度」が使える場合と使えない場合についてこの記事ではPhotoshopの新機能「スーパー解像度」を試し、他社の機能と比較した場合のメリットやデメリット、使えるケースと使えないケースについてまとめています。...Webデザインツールはどれを使えばいいの?emiと申します。emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。...Webデザイン初心者がつまづきがちな共通点Webデザインを学習中の方のレビューをしていて、いくつか共通のことがあることに気づいたのでまとめてみました。「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。Photoshopの「覆い焼き」や「なげなわ」って何?という話Photoshopを初めて使う方にとって、効果がわかりにくいツールはたくさんあると思います。...「Webデザイナーはコーディングできるべきか」という議論に対する私の考え過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。「Web制作に役立つIllustrator入門講座」という無料講座を開催しますIllustratorを使用したことがない方やWeb制作は未経験の方に向けて、Web制作でIllustratorをどのように使うのか、Photoshopとどのように使い分けたらよいかという話からGoogleのマテリアルデザインと呼ばれるデザイン手法の話、マテリアルデザインに基づいたアイコン制作をIllustratorで行う実習などを行います。フィルムカメラで撮影した写真を自分で現像・プリントしてみたフィルムで撮影した新宿の写真を自分で現像・紙焼きしたところ、数十年前に撮影した写真のような不思議な雰囲気になりました。年末年始にWebデザインを学び直すための3つのステップこの記事は、以下のような方を対象にしています。...うわっ、日本のWebデザイナーの年収、低すぎ...?以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど?」という記事が話題になっていました。「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで記事にまとめました。Publisher」の勉強会の内容のまとめです。登壇内容の動画やスライドが中心です。2019のレビュー記事に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。「スマートフォン時代のWebデザインスクール」というWebデザイン入門スクールをご自宅で動画受講可能です。Publisher」の勉強会の内容のまとめです。登壇内容の動画やスライドが中心です。「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。元気さんの登壇内容の動画等をご紹介します。Publisherを最強のプロトタイピングツールとして使うために知っておきたいことこの記事では主に以下の内容について書いています。JAPANの活動として、Affinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したのですが、その際撮影のお手伝いをさせていただきました。XD並みに軽いプロトタイピングツールが発売ここ最近はたった1つのアプリでWebデザインを完結させるワークフローを実践していますが、とても快適なのでその方法についてこの記事で紹介したいと考えています。このワークフローは現在WindowsおよびMacで実践可能です。今後iPadでもできるようになるはずです。タイトルの時点でひどすぎると感じていますし、このような記事を書くのは本望ではないのですが、これを許してはいけない、受け入れるわけにはいかないという気持ちがどうしてもありますので記事を書くことにしました。基礎編この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。写真素材の「ぱくたそ」にイタリアや熊本の写真を寄贈しました写真素材のぱくたそに、イタリアや熊本の写真を寄贈しました。公開されていますので、よろしければご利用ください。SVGの最適な書き出しのためにやった方が良いこと、やらない方が良いことSVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。