効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
2019年12月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン なぜ優秀なデザイナーでも酷いデザインを生み出してしまうのか？ 事前に十分なインプットが得られていない、全体のUXよりも見た目のデザインを優先してしまう など、酷いデザインが生まれる原因について書かれています。 ウェブ制作に活かすユニバーサルデザインの視点 – PRESS.mjmj ふさわしい配色とアクセシビリティなどについて。 フォント・ロゴ・GUI・ハードウェアをトレースして学ぶ｜Seiji Miyazawa｜note ワーナーブラザーズのロゴ、ガイド左側が合ってないですし黄金比とは言えない気がしますが、黄金比と言わないと偉い人が納得しないのですかね…？ 文字のデザインが苦手なので、
2019年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・アクセシビリティ Figmaチームが本国から来日！ Figma Tokyo Meetup レポート – Yahoo! JAPAN Tech Blog 私も参加していましたが、日本でのFigmaの盛り上がりを改めて感じました。 どんなふうに見えてるの？ 色覚に配慮したUI設計事例 #UI – Yahoo! JAPAN Tech Blog Yahoo!ファイナンスの例などを挙げ、色覚に配慮したUI設計について書かれています。 コーディング CSSフレームワークBulmaについて – 一休.com Developers Blog CSSフレームワークの比較など。以前はBootstrapユーザ
スマートスピーカーやNature Remoでスマート住宅にした結果
この記事ではスマートスピーカーをはじめとしたスマート家電をどのように使っているか、どのような方におすすめできるかということをお話ししています。 アメリカでは2018年末時点で約50%の家庭に普及していると推測されるスマートスピーカーですが、私がWeb制作者の方を対象に「スマートスピーカーが自宅にありますか？」とアンケートを採ったところ、意外とスマートスピーカーを持っていない方が多いということがわかりました。 Web制作者アンケート: スマートスピーカーが自宅にありますか？ — なつき (@Stocker_jp) 2018年7月29日 なお、電通デジタルの調査によると スマートスピーカーの普及率は6％ しかないそうで、所有していない理由は 「利用したことがない」や「どんなことができるのかよく分からない」 という方が多く、所有している方も （音楽、天気など）利用用途が一部の機能に集中している傾
2019年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Web開発・プログラミング 開発者向けドメイン「.dev」、Googleが有料で先行登録開始 – ITmedia NEWS 全ての.devドメインにHSTS（HTTP Strict-Transport-Security）が設定され、接続にはHTTPSを要求するため、安全だ とのこと。 .app と同様に、安全性を売りにしたトップレベルドメインのようです。 Chromeのシークレットモード、Webサイト側での検出ができないように修正へ 現在はWebサイト側でシークレットウインドウかどうか検出可能ですが、今後検出できなくなるそうです。 Chrome 74のCanaryで最初に実装され、Chrome 76か
SVGの最適な書き出しのためにやった方が良いこと、やらない方が良いこと
SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて
なぜSassが必要なの？
私は毎年Twitterで「SassなどのCSSプリプロセッサを使用していますか？」というアンケートをとっています。その際、「まだSassを使っていない方がいるのか」と驚く方がいる一方で、「なぜSassが必要なのかわからない」、あるいは「Sassを使ったけど必要性がわからないので使うのをやめた」という返信をいただくことがあります。 私自身、はじめてSassを知った時にはその必要性がよくわからず、すぐに自分の仕事に取り入れることができなかったのでそういう方の気持ちはよくわかります。 そこでこの記事では、私が最初にSassを必要ないと思ったのになぜ今はSassを使用しているのか、なぜ必要だと思ったのかということについてお話ししたいと思います。 Sassとは何か この記事を読んでいる方はすでにご存知の方も多いと思いますが、SassとはCSS拡張メタ言語と呼ばれるCSSを便利に記述するための言語のひ
2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
Chromeが重くなった時にやるべきこと
Google Chrome は軽量で高速なWebブラウザーですが、長く使っていると「重い」と感じるようになってくることがあります。 この記事では「Chromeが重くなった時にやるべきこと」についてまとめています。 1. シークレットウィンドウによる問題の切り分け 最初に書いておきますが、どんなWebブラウザーでも、拡張機能（アドオン/エクステンション）をたくさん入れたり、履歴やキャッシュが溜まってくると重くなるのは必然です。 「最近新しくセットアップした PC なのに Chrome が重い」という方もいらっしゃるかもしれませんが、Chrome を使用して Google にログインした時点で、以前使用していた拡張機能などが再びインストールされるため注意が必要です。 Chrome が拡張や履歴などのせいで重いのか、PC や Chrome そのもののせいで重いのかを切り分ける簡単な方法があります
2014年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング関係 マイクロソフト、開発者向けにAndroid/iOS/OS XでIEを実行可能に – TechCrunch 最新の IE の動作確認を、Android/iOS/OS X で行うための RemoteIE のベータ版を Microsoft が提供開始しました。 以前紹介した Modern.IE と何が違うかというと、Modern.IE は Mac や PC にインストールするのに対して、これは Microsoft のサーバー上にインストールされている Windows + IE を実行し、スクリーンショットを手元の Mac や PC で見ることができます。 そのため、ストレージ（HDD や
2014年10月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ | 株式会社LIG バナーのレイアウト例が参考になりました。 トレーステクニック（現代版）｜3倍早くなるためのDTP講座 Illustrator CCの新機能を使ったパスの描き方が、GIF アニメで分かりやすく解説されています。 SVG MANIAX Ver.2 – Mars vanilla 「SVGってもう使っていいの？」勉強会の資料です。 viewBox の説明が詳しいのが良かったです。 正しくKeynoteでプロトタイプを作るコツ : could iOS アプリのプロトタイプ制作には、最新版
Macの基礎の基礎: システム環境設定編
「Macの基礎の基礎」連載の第4回目は、OS X のシステム環境設定です。 本来は、システム環境設定は OS X を使い始めて最初に設定変更のために開くものと思いますが、事情により4回目の記事としました。 Mac で効率よくWeb制作をするにはシステム環境設定をきちんとやることが肝心です。 この記事ではおすすめの設定や、見ただけでは分かりづらい箇所について主に解説しています。 「システム環境設定」の起動 システム環境設定は、画面の下の方に表示されている Dock の中の「システム環境設定」アイコンをクリックするか、画面左上（メニューバーの左端）の Apple マーク（リンゴのマーク）をクリックして「システム環境設定」を選択します。 WindowsからMacに乗り換えた方へ 「システム環境設定」は、OS X の設定を変更するためのアプリケーション、つまり Windows でいう「コントロール
2013年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、実験的に1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめてみました。 好評であれば、来月以降も続けたいと思っています。 スマートフォン関係 iPhoneのシェア5割超え、Androidの不振続く――IDC調査 私は、世界規模で見ればスマートフォンのシェアは今後も Android が伸び続け、iOS は次点になると思っています。 しかし、日本は例外なのかもしれません。 その理由としては、 SoftBank をはじめ、日本では Android 端末より iPhone の方が安く手に入りやすいこと 日本人はブランド信仰が強いこと 「ドコモから iPhone が出るのを待ってた」という方が今でも多いこと 国産の Android 端末の出来が悪かったこと（ガラケーに回帰
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
