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

CanvaによるAffinity買収は「Adobeとの競争への大きな一歩」である ベクターグラフィックツール「Affinity Designer」写真編集ツール「Affinity Photo」などがCanvaに買収された件について、思うことをまとめています。メインビジュアルは Affinity team の写真です。 はじめに 2024年3月26日、CanvaがAffinityを買収したことが発表されました。 この買収は、AdobeがFigmaを買収しようとした時とは異なり、既に完了しています。 私は2019年頃から日本でAffinityの普及活動に携わってきていたので、ユーザーの方が心配しそうなことへの回答と、個人的にこの買収について思うことをまとめたいと思います。 ユーザーの方が心配しそうなことに対する回答 まず最初に落ち着いていただきたいのですが、Affinity開発元のSerif社

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo

DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海

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

この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。 デザイン（Adobe・Figma） Adob​​eのFigma買収は独占禁止法違反だとしてアメリカ司法省が訴訟を準備していると報じられる XDが突然開発ストップしたのは、独占禁止法を回避しようとしているのだろうなと思っています。 Galileo AI · Copilot for interface design 欲しいUIをテキストで書くと、Figmaで編集できるファイルを作成してくれるAIのようです。早期アクセスをリクエストしておきました。 非デザイナーの僕が「デザインぽい」ことをする時に使う便

2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧

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

この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac

先日Twitterで「大学生がスマートフォンでレポートを書いている」というツイートが話題になっており、それに対して反応している方達もほぼ全員が「スマートフォンでレポートを書くのは効率が悪い」という前提で話をしていることに大変違和感を覚えました。 なぜなら私はこのブログはもちろん、技術書を執筆するときでさえ主にスマートフォンで下書きをしているからです。 PCを使うのは、ほぼスクリーンショットの撮影と最後の仕上げだけです。 その方が、最初からPCで文字入力するのに比べて圧倒的に効率が良いです。 この記事では、iPhoneとAndroidそれぞれで音声入力を効率よくおこなう方法について解説します。 iPhone・iPadの場合 先に結論から申し上げると、iPhone・iPad・Macの日本語音声入力は、AndroidのGoogle音声入力に比べて認識精度が低く、認識できる単語が少ないです。 仕事

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン（Adobe・Figma） 作字テクニックのひとつ「文字を溶かす」を徹底解説します | 株式会社LIG Illustratorを使って「溶けたような文字」を作るためのチュートリアル Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 – JMDC TECH BLOG エンジニアに伝わるデザインを作るためのFigmaのAuto Layout入門 Photoshopに“作者証明”機能　メタデータを剥がされても復元可能、NFTマーケットとも連携 デザインは、見た目じゃない | NHKニュース コーディング Webブラウザーで「Visual Studio Code」が完

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事ではWebデザインを制作する際に、業種や雰囲気によってどのように配色を決めていけばいいのか、業種による配色の特徴、配色で変わる雰囲気について説明します。 業種による配色の特徴 業種によってよく使われる色と使われない色があるかを飲食店と金融会社や保険会社などについて見ていきます。 飲食店のWebサイトで使用されている色 まずは飲食店です。 飲食店のWebデザインでは店舗のイメージの色などを

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 完成したデザインをWebサイトとしてWebブラウザーに表示するためには、コーディングが必要になります。 コーディングを勉強中だったり、コーディング経験がまだあまり多くない方によくある悩みとして以下のようなものがあります。 どこから作業を進めていけばいいのか分からない同じようなスタイルを持ったclassが増えていってしまうスマホサイトのデザインが用意されていない時にどうすればいいのか分からない こ

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Flash Player終了 2020年12月31日、「Adobe Flash Player」のサポートが終了しました：今日は何の日？ – Engadget 日本版 Flash Playerのアンインストールを強く推奨しており以下のページでアンインストーラーも配布しています。 Adobeに問い合わせたところ、Macの「システム環境設定」の下の方にFlash Playerが表示されていない場合はそもそもアンインストーラーを使用する必要はないそうです。 リンク: Mac OS での Flash Player のアンインストール Webデザイン 【2020年版】Adobe XDのアップデートを動画で振り返る

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 初学者によくある共通点 Webデザインを学習中の方のレビュー（デザインのチェック）をしていて、いくつか共通のことがあることに気づいたのでまとめてみました。 フォントの種類を使いすぎてしまう最小フォントサイズは10pxフォントの規約についてワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう余白はきちんとあるのに違和感があるドロップシャドウやぼかしが濃いめ写真素材の検索時のキーワードの

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン モリサワ　テレワーク実施企業向けにMORISAWA PASSPORT使用許諾の緩和を実施 使用PC変更の手順などについて書かれています。 ソリッドとアウトライン、認識しやすいアイコンはどちら？ | UX MILK 塗りつぶされたソリッドアイコンの方が認識しやすいだろうと思っていたのですが、そうでない場合もあるということが書かれています。 コーディング Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ | コリス 結論として、Bootstrap 5はより高速で、よりシンプルで、見栄えのよいものになると思います。 とのことで、Boot

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・UI Webフロントエンドエンジニアにやさしいデザインファイルの作り方 – Qiita SketchでUIデザインするときにチェックすると良さそうな記事です。 Bad な UI を改善する 「UI Stack」 って知ってます？｜niri｜note 空っぽの状態、ローディング状態など5つの UI Stack で考慮漏れをなくそうという記事です。Webアプリをデザインするときなどに見ると良さそうです。 “Neumorphism” なるUIデザインのトレンド｜木村 博信 (hiro_kimu)｜note 最近少し話題になっている、凹凸が付けられているデザイントレンドですがUIというよりスタ