サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ストレッチ
stocker.jp
AI ChatGPT, Bing AI, BardはWeb制作者を助けてくれるAIとなるか？ Tuesday, May 23rd, 2023 ChatGPT, Bing AI, Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。 これらは様々な調べごとや、ちょっとした作業をするのにも適してるということは既にご存じだと思います。 Web制作者はもちろん、Web制作やプログラミングなどを勉強中の方も、ChatGPTなどの大規模言語モデルを使いこなすことで学習や仕事をスムーズに進めたり、あるいは手助けになりそうな予感がしたので、色々と試してみました。 これはAIをイメージしたAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。 今回試した大規模言語モデル ChatGPT(3.5 turbo): 無料で利用できるCh
このブログでは、今年1月頃からWebニュースのまとめ記事などでAI生成画像を使用しています。たとえば以下のようなものです。 今メルマガ登録頂くと、このようなAI生成画像による毛糸風の画像素材を配布します。 以下のような画像が220枚以上ありますので、ブログや技術記事などで使いやすいと思います。 PCのある部屋 カフェと人々 ロボット・AI 建物の外観 青い鳥 抽象的 島と船 部屋 こちらは無料で利用でき、改変可能、商用利用可能、著作権表記やリンクは不要です。 メルマガ登録でどなたも利用できます。 この画像素材は、メールマガジンに登録いただければどなたでも無料で利用できます。 メールマガジンは、スクールや動画講座のお知らせが月1回程度配信予定です。 そのほか、無料の動画講座や画像素材などの特典も不定期で配信予定です。 メール登録は以下からどうぞ。自動返信メールに画像素材のダウンロードURLを
Web技術 Google Bardを試すなら2つのことを試してほしい Thursday, May 11th, 2023 「Google Bard」は、GoogleがChatGPTやBing AIなどに対抗して公開した、大規模言語モデルを使用した、いわゆるチャットAIです。 昨日までは日本語で質問しても英語で返答していましたが、本日未明の「Google I/O」というイベントに合わせて、日本語での質問や返答にも対応しました。 早速多くの方がBardを試していますが、「回答の精度にがっかりした」という感想もみられます。 しかしがっかりする前に試して頂きたいことがあります。 それは回答の右上に表示されている［他の回答案を表示］をクリックして別の回答案を見ることと、数時間前の情報についてまとめて解説してもらうことです。 ［他の回答案を表示］について ChatGPTの場合、1つの質問に対して回答を1
Webデザイン デザインシステム入門！Web制作初心者が知るべき基本原則とFigma活用法 Monday, May 8th, 2023 この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようにな
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。最近はAI関連の話題がとても増えていますね。 コーディング Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！ ChromeやEdgeでCSSのネスト（入れ子）が利用できるようになりました。 SassがなくてもSassのような開発ができるようになるのは良いですね。 CSS Nesting | Can I use… Support tables for HTML5, CSS3, etc CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説 ユーザー操作
Web技術 効率よくコーディングを進めるためにChatGPTを使ってみよう Tuesday, April 25th, 2023 この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコ
お知らせ: Web制作の基礎から学べる「Webコーディングスクール」を渋谷で開催します！動画受講も可能です。 Web制作の基礎からJavaScript、AIを活用したコーディングまで学べる、土曜開催のスクールです。動画受講はお好きなときに観られます。詳しくはこちら ChatGPTの回答は間違っている場合があります。おかしいなと思ったら別の方法でも調べてみましょう おかしいと気づけるように、書籍や スクール 等で基礎知識を身につけておきましょう ChatGPTには2021年9月までの知識しかありません。それ以降のことは正しく回答することができません 質問した内容とその回答は、このサーバーやOpenAIのサーバーに一定期間保存される場合があります。企業秘密やプライバシー情報は送信しないでください 1日の利用回数は20回まででお願いします。同一人物と思われる方から大量の利用があった場合、利用を制
Web技術 ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました Monday, March 13th, 2023 ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。 なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。 ChatGPTで高品質な回答を得るために たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。 あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説
Webニュース 2023年2月の、これだけは押さえておきたいWeb関連の動き Tuesday, February 28th, 2023 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。 デザイン（Adobe・Figma） AdobeのFigma買収は独占禁止法違反だとしてアメリカ司法省が訴訟を準備していると報じられる XDが突然開発ストップしたのは、独占禁止法を回避しようとしているのだろうなと思っています。 Galileo AI · Copilot for interface design 欲しいUIをテキストで書くと、Figmaで編集できる
Webデザイン Adobe XDは利用できなくなるのか、Adobeに問い合わせました Wednesday, January 25th, 2023 2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったか
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この写真は、私が12月に撮影したものです。11月25日に発売された FUJIFILM X-T5 というカメラに、オールドレンズ風MFレンズの 7Artisans 35mm F1.2 (v1) を使用して撮影しました。 デザイン・Figma・UI デザイナーがFigmaを始めたい時に読む記事｜えび🍤｜note 今年は非常にFigmaが伸びて、Adobeに買収されるといったこともありました。 えびさんは最近Figmaの情報をTwitter等で発信されており、この記事では初心者向けに情報をまとめています。 UIから「白」が消える日｜ritar｜note デザイン素人に贈る、UIディレクション10個のポイン
この記事では、Affinity Designer 2、Affinity Photo 2、Affinity Publisher 2の新機能を日本語で解説している動画やツイート等をまとめています。 共通の新機能、Affinity Designer 2、Affinity Photo 2、Affinity Publisher 2、iPad特有の機能とカテゴリ分けしていますが、そのアプリにしかない機能ではなく「そのアプリでよく使いそうな機能」で分けているため、ほかのアプリでも利用できる機能もあります。 全部入りライセンスが登場 Windows版・Mac版・iPad版Affinity Designer、Affinity Photo、Affinity Publisherが全部使える「Affinity V2ユニバーサルライセンス」が登場。 PCでもiPadでも使いたい方、写真補正もデザインもしたい方、Ad
組織でデザインが推進できる人の思考術 著者のTwitterより: ✏️小さく絞って正直な目標をつくって計測する。これを続けさえすれば、少しずつ物事は変わっていきます（簡単とは言っていません）。 PhotoshopやIllustratorでPantoneのカラーリングに準拠したファイルを開くには有料ライセンスが必須に Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 – ICS MEDIA Figmaの「Auto Layout」を理解する – Qiita 写研のOpenTypeフォント第一弾は「石井明朝」「石井ゴシック」 アイキャッチデザインで参考になるWebメディア37選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作 ユーザーが迷わない、直感的に操作できるUIの作り方 | UX TIMES 10月 画像生成AI「DALL-E 2」組み込んだグラフィックス
Webデザイン AI描画ソフト「Stable Diffusion」はWeb制作の役に立つか？ Tuesday, October 18th, 2022 最近AIによる描画ソフトがかなり盛り上がっており、その中でも特に「Stable Diffusion」はWeb制作者にとってもインパクトが大きく、使い方によっては制作の役に立つかもしれないと思っています。 まずはStable Diffusionで制作した画像をご覧ください。 これらの画像は写真のように見えるかもしれませんが、どれもAI描画ソフトから出力されたものです。出力後に一切補正はしていません。 「こういう画像が欲しい」と頭で考えてから出力が完了するまでの時間は、約30分程度です。 以下のような、自分でつくるのはちょっと面倒なアイソメトリック風イラストや3DCG風の画像も制作できます。 建築イメージのような画像も制作できます。 自分で作るの
「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などのスクリーンサイズま
※私はFigmaがAdobeに買収されたからといって、即座にFigmaがサービス終了するとは思っていません。ただ、アップデート速度が遅くなるなどゆっくりと時間をかけて衰退していったり、次第にユーザーが離れてしまうことはあり得ると思っています。 Adobe XDはどうなる？ Web制作者の方のツイートを見ていると「Adobe XDがFigmaのようにWebブラウザーで動くようになるのでは」とか「Adobe XDがFigmaのように開発が活発になるのでは」と期待している方もいらっしゃるようですが、私はそうは思っていません。 私の予想としては「今後の大きなアップデート（新機能の追加）はほとんどないだろう」と予想しています。 Adobe XDは「毎月アップデートする」と発表されていましたが、2021年後半からアップデート頻度が落ち始め（新機能なし、バグ修正のみの月があるなど）、2022年4月以降は
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン “牛乳パック”どっちが好きですか？｜内田 広由紀｜視覚デザイン研究所｜note 視覚デザイン研究所はデザイン関連の本で良いものがあるため、かなり昔に以下の記事で紹介していました。最近はnoteもやってたのですね。 関連: 年末年始にWebデザインを学び直すための3つのステップ | Stocker.jp / diary 知っておくべきUI/UXアニメーションの12の原則 (12 principles of UI/UX animation you should know) こちらは英文記事ですが、Google翻訳などで十分理解できる内容ですので取り上げました。 Chrome PC版の場合はアドレ
Webニュース 2022年6月の、これだけは押さえておきたいWeb関連の動き Thursday, June 30th, 2022 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 IE11サポート終了 Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 – Windows Blog for Japan 6月の大きなニュースは、やはりIE11サポート終了だと思います。 この記事には Internet Explorer を開くと、モダン ブラウザーである IE モード搭載の Microsoft Edge に徐々にユーザーをリダイレクトします と書かれており、つまり「今後IEを起動しようとすると、Chr
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、backdrop-filter:blur(10px); を指定
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UX・UI UXデザイナーは本当にデザイナーなのか デザイン会社 ビートラックス: ブログ WebデザイナーはUXデザイナーより価値が低いわけではないし、UXデザイナーはWebデザイナーの上位互換でもない 一般的にUXデザイナーはWebデザイナーより給料が高かったりしますが、Webデザイナーの価値が低いわけでも上位互換でもないという記事です。 ベテランほど知らずに損してるIllustratorの新常識 2022 UIデザインのための心理学：33の法則・原則（実例つき） | knowledge / baigie Adobe XDで無料のスタータープランを使い続ける方法 | Stocker.jp
Webデザイン Adobe XDで無料のスタータープランを使い続ける方法 Tuesday, April 19th, 2022 Adobe XDはこれまで、有料のプランだけでなく無料のスタータープランがありました。 無料のスタータープランは書き出しや共有に制限があるもののXDのファイルを編集できました。 無料のスタータープランは、デザイナーではない方（営業担当者や経営者、ディレクターなど）がデザインカンプを見たい時や編集をしたい時、自分の考えをデザイナーに伝えたい時などに重宝されていました。 ところが、Adobe XDがバージョン50になってから「無料のスタータープランが使えなくなった」というツイートを多く見かけるようになりました。 その一方で「まだスタータープランは使えるらしい」と言っている方もいます。 どちらかはっきりしないままなのはモヤモヤして気持ち悪いので、Adobe製品をインストー
Webニュース 2022年2月の、これだけは押さえておきたいWeb関連の動き Tuesday, March 1st, 2022 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Adobe・ユニバーサルデザイン 機能概要 | Photoshop デスクトップ（2022 年 2 月リリース） Photoshop で WebP ファイルを開き、作成、編集、および保存できるようになりました とのこと。 「WebP」とは新しいWeb用画像形式で、Safari（バージョン14以上）を含むすべてのモダンブラウザーで使用できます。 Adobeがダークパターンでユーザーをだまし12カ月間契約をさせているとして海外で話題に 無料トライアルを開始してから15日後に解約し
Android iPhone・Androidで高速に日本語音声入力するためのベストプラクティス Monday, December 13th, 2021 先日Twitterで「大学生がスマートフォンでレポートを書いている」というツイートが話題になっており、それに対して反応している方達もほぼ全員が「スマートフォンでレポートを書くのは効率が悪い」という前提で話をしていることに大変違和感を覚えました。 なぜなら私はこのブログはもちろん、技術書を執筆するときでさえ主にスマートフォンで下書きをしているからです。 PCを使うのは、ほぼスクリーンショットの撮影と最後の仕上げだけです。 その方が、最初からPCで文字入力するのに比べて圧倒的に効率が良いです。 この記事では、iPhoneとAndroidそれぞれで音声入力を効率よくおこなう方法について解説します。 iPhone・iPadの場合 先に結論から申し上
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン（Adobe・Figma） 作字テクニックのひとつ「文字を溶かす」を徹底解説します | 株式会社LIG Illustratorを使って「溶けたような文字」を作るためのチュートリアル Web・アプリ開発のエンジニアが知っておきたい、デザインツール「Figma」の基本 – JMDC TECH BLOG エンジニアに伝わるデザインを作るためのFigmaのAuto Layout入門 Photoshopに“作者証明”機能 メタデータを剥がされても復元可能、NFTマーケットとも連携 デザインは、見た目じゃない | NHKニュース コーディング Webブラウザーで「Visual Studio Code」が完
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD Webフォントが読み込まれるまでのフォールバックフォントを本来のフォントにより近づける方法について解説されています。 6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」 – Qiita flex-growとflex-shrinkの分かりやすい解説です。 CSSのtext-decorationで一部のテキストだけ下線を非表示にする たとえば［詳細を見る→］の矢印部分だけ下線を引きたくない場合の解説です。 ｢iOS 15｣の｢Safari｣ではWebM オーディオコーデックをサポートへ |
Webデザイン 画像で分かる日本語フォントと欧文フォントの基礎 Thursday, August 19th, 2021 この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。 Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。 ヒラギノ角ゴシック ヒラギノ角ゴシックは、日本語環境のMacに標準でインストールされているフォントです。 太さがW0（極細）からW9（極太）まで豊富に揃っているのが特徴で、癖がなく美しい書体なので、幅広くさまざまな用途で使いやすいと思います。 画像の右側は広告バナーなどで使用する場合を想定しています。 これらの画像は「スマートフォン時代のWebデザインスクール」をお手伝いいただいているUSAGI DESIGN emi.のemiさんにご協力いただき作成しました。 ヒラ
この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事ではWebデザインを制作する際に、業種や雰囲気によってどのように配色を決めていけばいいのか、業種による配色の特徴、配色で変わる雰囲気について説明します。 業種による配色の特徴 業種によってよく使われる色と使われない色があるかを飲食店と金融会社や保険会社などについて見ていきます。 飲食店のWebサイトで使用されている色 まずは飲食店です。 飲食店のWebデザインでは店舗のイメージの色などをもとに作成
Webデザイン フォントワークスがGitHubで無料公開しているフォントをPhotoshopなどで使ってみよう Wednesday, May 26th, 2021 この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事では、フォントワークスがGitHubで配布している無償フォントをPhotoshopやIllustratorで使用する方法について解説します。 フォントワークスがGitHubで公開しているフォントは「SILオープンフォントライセンス
この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Flexboxとは Flexbox（Flexible Box Layout Module）はフレキシブルボックスレイアウトモジュールという名前の通り、ボックスのレイアウトを簡単に実現できるものです。 Flexboxを使用すると、今までFloatで処理してきた横並びレイアウトはもちろん、親要素と子要素のプロパティを組み合わせてボックスとボックスの余白を調整することもできます。 gapがモダンブラウザでサポー
次のページ
このページを最初にブックマークしてみませんか？
『Webデザイン制作・Webサービス・Webデザインレッスン :: Stocker.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
