サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
stocker.jp
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 10月は記事を公開しなかったため、今月は10月と11月の記事をまとめています（それぞれの月ごとの見出しを付けています）。 デザイン 組織でデザインが推進できる人の思考術 著者のTwitterより: ✏️小さく絞って正直な目標をつくって計測する。これを続けさえすれば、少しずつ物事は変わっていきます（簡単とは言っていません）。 PhotoshopやIllustratorでPantoneのカラーリングに準拠したファイルを開くには有料ライセンスが必須に Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 – ICS MEDIA Figmaの「Auto Layout」を理解する – Qiita
最近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などのスクリーンサイズま
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
「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系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 IE11サポート終了 Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 – Windows Blog for Japan 6月の大きなニュースは、やはりIE11サポート終了だと思います。 この記事には Internet Explorer を開くと、モダン ブラウザーである IE モード搭載の Microsoft Edge に徐々にユーザーをリダイレクトします と書かれており、つまり「今後IEを起動しようとすると、Chromeと同じ表示結果のEdgeが起動する」ことになります。 将来的に、IEは完全にアンインストールされるそうです。 Microso
この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていて、2023年に新しいブラウザーにあわせて再度連載していたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能が利用可能になったので、ぜひ試してみてください。 画像・CODEPEN作成協力: emiさん backdrop-filter:blur() を使ったぼかし表現 backdrop-filter:blur()の中の数値を大きくするほど、強いぼかしをかけることができます。 以下のCODEPEN内の［CSS］をクリックすると、CSSを確認できます。 背景に写真を指定した .box 要素内に .blur を配置し、bac
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・UX・UI UXデザイナーは本当にデザイナーなのか デザイン会社 ビートラックス: ブログ WebデザイナーはUXデザイナーより価値が低いわけではないし、UXデザイナーはWebデザイナーの上位互換でもない 一般的にUXデザイナーはWebデザイナーより給料が高かったりしますが、Webデザイナーの価値が低いわけでも上位互換でもないという記事です。 ベテランほど知らずに損してるIllustratorの新常識 2022 UIデザインのための心理学：33の法則・原則（実例つき） | knowledge / baigie Adobe XDで無料のスタータープランを使い続ける方法 | Stocker.jp
Adobe XDはこれまで、有料のプランだけでなく無料のスタータープランがありました。 無料のスタータープランは書き出しや共有に制限があるもののXDのファイルを編集できました。 無料のスタータープランは、デザイナーではない方（営業担当者や経営者、ディレクターなど）がデザインカンプを見たい時や編集をしたい時、自分の考えをデザイナーに伝えたい時などに重宝されていました。 ところが、Adobe XDがバージョン50になってから「無料のスタータープランが使えなくなった」というツイートを多く見かけるようになりました。 その一方で「まだスタータープランは使えるらしい」と言っている方もいます。 どちらかはっきりしないままなのはモヤモヤして気持ち悪いので、Adobe製品をインストールしていないWindows 10にAdobe XDを新規インストールして、スタータープランが利用可能かどうか検証しました。 先
先日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系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD Webフォントが読み込まれるまでのフォールバックフォントを本来のフォントにより近づける方法について解説されています。 6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」 – Qiita flex-growとflex-shrinkの分かりやすい解説です。 CSSのtext-decorationで一部のテキストだけ下線を非表示にする たとえば［詳細を見る→］の矢印部分だけ下線を引きたくない場合の解説です。 ｢iOS 15｣の｢Safari｣ではWebM オーディオコーデックをサポートへ |
この記事は、Twitterで連載していた「1枚の画像でフォントの特徴と使い方がわかる」に追加の情報を加えて記事にしたものです。 Webデザインを勉強されている方や、フォントの知識を深めたい方に最適な記事です。 ヒラギノ角ゴシック ヒラギノ角ゴシックは、日本語環境のMacに標準でインストールされているフォントです。 太さがW0（極細）からW9（極太）まで豊富に揃っているのが特徴で、癖がなく美しい書体なので、幅広くさまざまな用途で使いやすいと思います。 画像の右側は広告バナーなどで使用する場合を想定しています。 これらの画像は「スマートフォン時代のWebデザインスクール」をお手伝いいただいているUSAGI DESIGN emi.のemiさんにご協力いただき作成しました。 ヒラギノ明朝 こちらも日本語環境のMacに標準でインストールされているフォントです。 以前Apple Japanに問い合わせ
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事ではWebデザインを制作する際に、業種や雰囲気によってどのように配色を決めていけばいいのか、業種による配色の特徴、配色で変わる雰囲気について説明します。 業種による配色の特徴 業種によってよく使われる色と使われない色があるかを飲食店と金融会社や保険会社などについて見ていきます。 飲食店のWebサイトで使用されている色 まずは飲食店です。 飲食店のWebデザインでは店舗のイメージの色などを
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というWebサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 この記事では、フォントワークスがGitHubで配布している無償フォントをPhotoshopやIllustratorで使用する方法について解説します。 フォントワークスがGitHubで公開しているフォントは「SILオープンフォントライセンス」のため、無償で個人利用はもちろん、商用利用も可能です。 SILオープンフォントライセンスについて、詳しくは以下のページに書かれています。使用前に確認しま
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Flexboxとは Flexbox（Flexible Box Layout Module）はフレキシブルボックスレイアウトモジュールという名前の通り、ボックスのレイアウトを簡単に実現できるものです。 Flexboxを使用すると、今までFloatで処理してきた横並びレイアウトはもちろん、親要素と子要素のプロパティを組み合わせてボックスとボックスの余白を調整することもできます。 gapがモダンブラウ
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
この記事ではPhotoshopの新機能「スーパー解像度」を試し、他社の機能と比較した場合のメリットやデメリット、使えるケースと使えないケースについてまとめています。 「スーパー解像度」は記事執筆時点ではPhotoshop Camera RAW（RAW現像ダイアログ）にて実行でき、今後Lightroomでも搭載予定とされています。 「スーパー解像度」とは何か いわゆる「AI・機械学習を使って写真を高解像度にする」機能です。 従来からある「ディテールを保持 2.0」では、JPEGのような現像後の写真を高解像度に拡大できましたが、「スーパー解像度」ではRAW現像時に写真を高解像度に拡大できます。 圧縮されて情報量が減らされたJPEG画像よりも、撮影時の生データであるRAW画像の方が大幅に情報量が多いため、より綺麗に写真を拡大できると期待できます。 他社製品の類似機能について 他社製品には既にこう
現在、Affinityには縦書き機能がなく、搭載予定もありません（Affinity開発会社のCEOが2023年に「縦書きの開発を進めている」と発言しました。詳しくはこの記事の最後に書いています）。 現時点で、Affinityで日本語を縦書きする方法は以下の2種類あります。 A: 縦書き用フォントを使用する B: Affinity Publisherで既存のフォントでテキストを制作し、それを縦書きにする Aの方法はAffinity Publisherだけでなく、Affinity DesignerやAffinity Photoでも可能です。この記事では、この方法について解説しています。 Bの方法は好きな日本語フォントを使用できるというメリットがありますが、Affinity Publisherのみで手間もかかります。 この方法について知りたい方は、↓の記事をお読みください。 Affinity P
この記事について この記事は、スマートフォン時代の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デザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング CSSだけで作れる！背景パターンや模様のサンプルコードまとめ | Web Design Trends Webページの背景画像は一般的にPNGやJPEGなどのラスター画像を使用しますが、CSSやSVGを使用するとテキストエディターで変更したりアニメーションさせたりできますし高密度ディスプレイにも強いですね。 Adobe iOS版Lightroomの最新版ですべての写真が消えてしまうバグが発生 – GIGAZINE 失われた写真は修復不可能である とのことです。恐ろしい… IE・Chrome・Mozilla 「Internet Explore 11（IE 11）」で「Microsoft 36
ここ数日、「MicrosoftがInternet Explorer 11のサポートを終了」というニュースが話題になっていましたが、誤解されている方も多いようですのでこの記事で解説します。 この記事はWeb制作者の方、およびWeb制作を依頼される方向けに書いています。 追記: IE11のサポートは2022年 6月 15日で終了しました この記事を書いた後、IE11のサポートは2022年 6月 15日で終了し、それ以降はIE11を起動しようとするとGoogle Chromeと同じブラウザーエンジンを使用したEdgeが強制的に起動することが発表されました。 関連ニュースは以下のページをご覧ください。 2021年5月の、これだけは押さえておきたいWeb関連の動き | Stocker.jp / diary IE11がなくなるわけではない このニュースを見て「IE11のセキュリティアップデートが終了す
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 リモートワーク 新型コロナ:「契約書のハンコ不要」、政府が見解 対面作業削減狙う :日本経済新聞 記事からはリンクされていませんが、「政府の見解」といわれるPDFは以下のもののようです。 PDF: 捺印についてのＱ＆Ａ デザイン・UI コロナ接触を通知する日本版｢接触確認アプリ｣を作ったのは誰か？…｢6割普及｣への挑戦 | Business Insider Japan アプリのUI/UXの設計には｢Adobe XD｣が活用されている とのこと。 コーディング マイクロソフト、Chromium版「Edge」の自動配信を開始 – ZDNet Japan 日本でも6月にようやく新しいEdgeが自動配信され
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン モリサワ テレワーク実施企業向けにMORISAWA PASSPORT使用許諾の緩和を実施 使用PC変更の手順などについて書かれています。 ソリッドとアウトライン、認識しやすいアイコンはどちら？ | UX MILK 塗りつぶされたソリッドアイコンの方が認識しやすいだろうと思っていたのですが、そうでない場合もあるということが書かれています。 コーディング Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ | コリス 結論として、Bootstrap 5はより高速で、よりシンプルで、見栄えのよいものになると思います。 とのことで、Boot
この記事では、Affinity Designer、Affinity Photoなどの解説を日本語のテキストで行っているサイトやブログを紹介しています。 日本語の動画については別の記事で紹介予定です。 Affinity Designer 1.8 超初心者向け｜游貴｜note ドキュメントの新規作成など、初歩から丁寧に解説されています。 Adobe製品を使ったことがない方はまずこちらをご覧になると良いと思います。 Affinity Designer | Rriver Web制作者の渡辺竜さんのブログには主にAffinity Designerの使い方がまとめられており、以下の記事は特にWeb制作者向けにAffinity Designerの使い方や注意点について詳しくまとめられています。 ウェブ制作に役立つAffinity Designerの使い方と注意点 | RriverAffinity Des
次のページ
このページを最初にブックマークしてみませんか？
『Webデザイン制作・Webサービス・Webデザインレッスン :: Stocker.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
