2024年3月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Figma・UI Canva、Affinityを買収　Adobe対抗のデザインツール大手 個人的に注目のニュースだったので、記事を書きました。 CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である – Stocker.jp/diary Iconbuddy — 100K+ open source icons アイコン素材検索サイトです。 Figmaが生成AI機能を強化へ、アイデア出しや付箋の要約などをサポート／ディラン・フィールドCEOが「Figma」の今後の展望を語る 「UIの色を変えただけで大量のクレ

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

この記事について この記事は、 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制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン AdobeのFigma買収とAdobe XDのこれから 9月の大きなニュースは、やはりAdobeによるFigma買収だと思います。このブログでも記事にしています。 関連: Adobe、Figmaを約2.9兆円で買収へ　デザインコラボツール大手 フォトショップの作業が楽になる、覚えておきたい小技テクニック18選 とても有益ですが、レイヤーの複製はoption+ドラッグではなくcommand+Jの方が速いと思います。 ちょうどいいWebデザインギャラリー そのWebサイトのいいところが言語化されているギャラリーサイトです。 Screen Sizes iPhone・iPadなどのスクリーンサイズま

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

私は ある出来事 をきっかけに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系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン ワイヤーフレームの作り方のコツ｜制作時や評価時に意識すべきこと | Pinto! ワイヤーフレームはデザインの下書きではない というのはなるほどと思いました。 ワイヤーフレームは情報設計のためのものですが、いつの間にかデザインカンプの下書きにしてしまっている方が多いかもしれませんね。 次期macOSでの32-bitアプリサポート終了に伴い、Adobe CSなど動かなくなる可能性があるアプリをチェックする方法。 | AAPL Ch. さすがに仕事で Adobe CS6 以下を使用している企業はもうないだろうと思いますが、今度こそ裏技を使用してもCS6以下は起動しなくなりそうです。 CS6

例えば、Webページで SVG アニメーションを使用して「立体的でアニメーションするもの」を制作しようとすると、コードを手書きしたり Illustrator で制作したものをパラパラ漫画にしたりといった方法ではなかなか大変です。 そこで、オープンソースの 3DCG ソフトウェアである Blender を使用すると以下のようなアニメーションを比較的簡単に作ることができます。 ▲この画像はSVGアニメーションです。クリックすると拡大表示することができます。もし表示できない場合は GIFアニメーション版 をご覧ください。 Blender は、Windows・Mac・Linux などで利用できるオープンソースの 3DCG ソフトウェアです。基本的な使い方は以下の記事に書いています。 「AdobeユーザーのためのBlender入門」というチュートリアルを作りました | Stocker.jp / di

過去のCCバージョンを削除せずにCC 2015をインストールする方法 まず最初に注意点ですが、Creative Cloud デスクトップアプリケーションから CC 2015 インストールする際、［詳細オプション］をクリックして［以前のバージョンを削除］のチェックを外さないと、CC や CC 2014 が削除されます。 詳しくは以下の記事をご覧ください。 参考: 新登場、メジャーアップデート Photoshop CC 2015年リリース | Adobe Creative Station Photoshop CC 2015の新機能 同じレイヤースタイルの重ねがけ レイヤースタイルパネルで、［境界線］などの右にある［+］をクリックすると、同じレイヤースタイルを追加できます。 これまで、1つのレイヤーに境界線を2つかけたりすることができず面倒な代替方法が必要でしたが、だいぶ楽になりそうです。 注意