Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
WordPressブロックテーマで一新された、ブログデザインと制作フロー
WordPressブロックテーマで一新された、ブログデザインと制作フロー 2023年12月に、このブログのWordPressテーマをリニューアルしました。 その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。 今回のWordPressテーマ制作手法 今回のブログリニューアルの際に、あえて行った手法は以下の通りです。 これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する FigmaやAdobe XDのようなデザインツールを使用しない WordPressのフルサイト編集機能でデザインする HTMLとCSSを書いてからWordPressテーマに変換しない functions.php にコードを追加
効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました
ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。 さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。 これは
AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
iPhone・Androidで高速に日本語音声入力するためのベストプラクティス
先日Twitterで「大学生がスマートフォンでレポートを書いている」というツイートが話題になっており、それに対して反応している方達もほぼ全員が「スマートフォンでレポートを書くのは効率が悪い」という前提で話をしていることに大変違和感を覚えました。 なぜなら私はこのブログはもちろん、技術書を執筆するときでさえ主にスマートフォンで下書きをしているからです。 PCを使うのは、ほぼスクリーンショットの撮影と最後の仕上げだけです。 その方が、最初からPCで文字入力するのに比べて圧倒的に効率が良いです。 この記事では、iPhoneとAndroidそれぞれで音声入力を効率よくおこなう方法について解説します。 iPhone・iPadの場合 先に結論から申し上げると、iPhone・iPad・Macの日本語音声入力は、AndroidのGoogle音声入力に比べて認識精度が低く、認識できる単語が少ないです。 仕事
Affinity製品を使用しているWeb制作者のインタビュー動画と最近のユーザーグループの活動について
Affinity User Group JAPANの活動として、Affinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したのですが、その際撮影のお手伝いをさせていただきました。 インタビューに応じていただいたのは株式会社インターフィールの勝谷元気さんです。 動画は以下からご覧いただけます。 勝谷元気さん(@nibushibu)は2014年のAffinity Designer Beta版の頃から使用されているそうで、Webサイトの制作だけでなく、印刷物もAffinity Designerで作られているとのことです。 撮影・編集・アップロードされたYMRchannelではAffinity Designer NINJAというAffinity Designerの日本語チュートリアル動画を配信されています。 なお、このインタビュー動画には翻訳者の方に翻訳していただいた英
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
2016年10月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング CSSになり損ねた言語たち | デザイン | POSTD タイトルの通り「CSSになり損ねたスタイル言語の話」なのですが、CSSとは書き方や考え方が違ったり、部分的にCSSより便利な言語もあったりと面白い記事でした。 W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート | HTML5Experts.jp 「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne v
VRゴーグル・HTMLライクにVR空間を作れるチュートリアル付きの雑誌「VRFREEK」を買ってみた
VR（バーチャルリアリティ）といえば Facebook が買収した Oculus や、PlayStation VR などいろいろな製品が話題になっています。 そんな中、VRFREEK という VR 専門誌が登場したので購入してみました。 スマートフォンを入れて VR コンテンツを楽しめるゴーグルが付録になっていて、てっきり用意されたコンテンツを見るだけかと思っていたら、HTML ライクに VR コンテンツを作る方法まで記事に書かれててなかなか楽しめたので記事にしてみました。 付録のVRゴーグルについて 表紙を開くとこんな感じで袋に入っていて、1分ほどで組み立てられます。ハサミやのりなど不要です。 iPhone 5s（4インチ）だと上や左右が少し余りますが、VR コンテンツはきちんと楽しめました。 おそらく、5インチ前後のスマートフォンだと調度よい感じになると思います。 同じようにスマートフ
「PCをWin7のままにしておきたいのに強制的にWin10にするMSが嫌だ！Macに行く！」という方へMacユーザーとして言っておきたいこと
Twitter などで「5年前に買ったPCを Win7 のままにしておきたいのに、強制的に Win10 にする MS が嫌だ！もう Mac に行く！」などというツイートを見かけることがありますが、Mac が大好きで、普段Macユーザー増えることに対して大歓迎のスタンスである私から1つだけ言っておきたいことがあります。 「こっち来んな。以上」 この記事はこれで終わりです…と言いたいところですが、さすがにこれだけでは普段 Mac を使っていない方には投げやり過ぎるかもしれないのでその理由を書いておきます。 5年前に買ったMacを使い続けられるのか 少なくとも メインマシンとして仕事でバリバリ使う のは厳しいです。 私の場合、5年前に買った Mac といえば MacBook Air 2011 ですが、4年前に知人に売却しています。 さすがに Mac を毎年買い換えている方は多くはないと思いますが
Macintosh HDを整理し、空き容量を効率よく増やす方法
MacBook Air などのラップトップ型の Mac を長く使っていると、Macintosh HD（内蔵ハードディスクや SSD などのストレージ）の空き容量がなくなってきて困ることもあるかと思います。 私の場合、MacBook Air の 256GB モデルを使用しており、先日どうしても Macintosh HD に 64GB 以上の空き容量が欲しかったので、以下の方法を試したところ 90GB 以上の空き領域を作ることができましたので紹介します。 ※この記事は、ファイルの移動や削除、パーティションの作成などについて書いています。それらの作業を行う際は、必ずバックアップを取ったうえで作業を行い、必要なファイルやパーティションを誤って削除しないよう、細心の注意を払って作業を行ってください。 この記事を参考にしたことで発生した、いかなる損害も一切補償できません。 何がHDを占領しているか調べ
年末年始にWebデザインを学び直すための3つのステップ
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
