CHAPTER　1 デザインを始める前に CHAPTER　2 レイアウト CHAPTER　3 配色 CHAPTER　4 タイポグラフィ CHAPTER　5 写真とイラスト CHAPTER　6 デザインのアイデア集 カバーイラストはこれまでと同様岡村亮太様に描いていただきました！今回も素敵なイラストをありがとうございます！ 予約する こんな人におすすめ これからデザインをはじめる初心者 HTMLとCSSの基礎を学んだあと、何を勉強しようか考えていた人 一度デザインを勉強したけど挫折した人 Webとグラフィックの両方のデザインを学びたい人 デザイン制作のアイデアをもらいたい人 デザインって結局どう進めればいいかわからず迷子な人 デザインは才能ではなく、きちんとルールや仕組みを学べば誰でも取り組めるものだよ！という気持ちをたっぷりと込めて書きました。これからはじめてみたい人が第一歩目を踏み出せる

Webpとは、2010年にGoogleが開発した次世代画像フォーマットのことです。 Webpは画像サイズが軽いことで知られており、ホームページ制作やWebサイト制作では、SEOの観点から利用することが推奨されています。しかし、Webpの具体的な概要が分からない人は多いのではないでしょうか。 そこで本記事では、Webpの概要や、JPEG、PNGなどその他の画像形式との違いを解説します。また、Webpを使用するメリットやデメリット、実際に使用する方法を解説しますので、ぜひ参考にしてください。 Webpとは はじめに、Webpの概要から解説します。Webpとは、Googleが開発した次世代画像フォーマットのことであり、2010年に公式発表されました。 Webpは画像の圧縮率が高く、表示速度の高速化に有利に働きます。一見メリットしかないように思えるWebpですが、以前は対応しているブラウザが少ない

2023年12月の、これだけは押さえておきたいWeb関連の動き 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン・Adobe・Figma Adobe、Figma買収を撤回　欧州で当局の承認見込めず – 日本経済新聞 買収に必要な承認が得られないため、AdobeとFigmaは相互に買収契約を破棄することで合意したとのことです。AdobeはFigmaに対して違約金を支払うとのこと。 Figma公式Webサイトによると「FigmaとAdobeは、提案されていた合併を中止することにしました。」とのことです。 画像のALTに、ChatGPTによる日本語の要約をまとめたものを入れています。https://t.co/d1otCUX3LI pic.twit

2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな

DUB DESiGNはデザインをテーマにしたメディアです。 Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に記事を配信しています。

「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ページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わっている人、真剣に取り組んでいる人向けの解説書。確かなコーディング力を身につけるためのHTMLのみに特化されています。私の見落としがなければ、CSSに関して本書は0です。 HTMLの基礎知識から、文章構造、ページ構造、アクセシビリティやユーザビリティに配慮したマークアップについてしっかりと学べ、スキルアップになる一冊です。

この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W

ご来場いただき、誠にありがとうございます。 1996年、『ポケットモンスター 赤・緑』が発売されてから、 多くのトレーナーが様々な地方へと冒険に繰り出していきました。 そしてこの度、最新作『ポケットモンスター スカーレット・ バイオレット』の 発売を記念して、 Pokémon Online Gallery を開催いたします。 本展は ≪冒険の軌跡≫ をテーマに、 たくさんの思い出を展示しています。 楽しかったことや、大変だったこと。 嬉しかったことや、悔しかったこと。 彩り豊かな思い出の世界を、是非ご体感ください。

ゲームにはうんこ漢字ドリルのキャラクター・「うんこ先生」が登場。プレイヤーは、うんこ先生が出すお金に関するクイズに答えてポイントを集めていく。クリアするとアイテム「伝説のうんこ」が手に入るという。 「金融教育が不足している日本では、うんこもお金もうけも汚いものと捉えられがち。実はどちらも、『人を笑顔にできる』という共通点がある」（文響社） うんこ漢字ドリルは2017年に販売を開始。発売から1カ月半で100万部以上を売り上げ、「うんこ計算ドリル」などのシリーズ作品も提供している。シリーズの累計売上は950万部以上（11月17日時点）という。 関連記事 「うんこ体温ドリル」公開　コロナ対策で重要な体温の基礎、うんこ交えて分かりやすく 文響社は10日、オムロンヘルスケアとの協業でコロナ禍で注目の高まった体温の基礎知識を解説する「うんこ体温ドリル」を公開した。Web版は無料公開している。 「うんこ

こんにちは、ソラコムのテクノロジー・エバンジェリスト 松下(ニックネーム: Max)です。 エバンジェリストはセミナーや執筆を通じて、IoTの活用方法や最新事例を多くの人に知っていただく役割を担っており、資料作りでスクリーンショットを利用したり、セミナーでライブデモを行うことが多くあります。 ここでは、Webブラウザの「CSS3のフィルタ関数」を利用して、Webページ上の情報を動的に隠す(マスキング)する方法を解説します。IoTやSORACOMの話からは少し外れていますが、私(Max)がエバンジェリストとしての活動の際に得たことを「MaxのTips」として紹介し、皆さんにも役立てていただければと思います。 この方法を使うと、Webページを表示した時点で情報がマスキングされるため、スクリーンショット取得後の編集が不要になるだけでなく、ライブデモや動画撮影も安心して行うことができます。 例えば

日本人向けの記事のため表記がカタカナとなっております。そのため完全に正確な英語の発音を保証しているわけではございませんのでご了承ください。（より正しい発音が気になる方は各自で発音記号をお調べください。） また私自身は帰国次女でもない純粋な日本人＆英語力凡人レベルです。明らかに間違っているものがありましたらコメントやTwitterなどでご指摘ください。 もちろん他にもこれが間違いやすいよ、という用語もあればお待ちしております🙏 ❓がついてるのは決めきれないorネイティブでも揺れがあるor議論が必要　なものです。 a11y エイイレブンワイ absolute　アブソルート Adobe　アドビ Airbnb　エアビーアンドビー ajax　エイジャックス align　アライン（text-align　テキストアライン　など） AMP（Accelerated Mobile Pages）　アンプ An

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

目まぐるしい変化への対応を求められるウェブ従事者にとって、制作をより快適にする便利な最新オンラインツールをまとめてご紹介します。 いままで時間のかかっていた面倒な作業がワンクリックで完了の時短ツールから、そのまま使えるウェブテンプレート、シンプルで使いやすいアイコン素材など、ウェブ制作のお悩みをまとめて解決できる、無料のツールや素材を中心にセレクト。 さいごは、「こんなツール、あったんだ」と思える、クリエイティブ全開なツールが控えます。暇なときの時間つぶしにもいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザインツール 3. プロトタイプ・アイコンツール 4. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Ho

「おしゃれでかっこいいウェブサイトを作りたいけど、レイアウトにいつも困る。」 「同じような似たデザインから抜け出せない」 「周りがあっと驚くWebデザインがしたい」 「CSS Grid や Flexbox プロパティの使いかたを覚えたい」 そんなひとにおすすめしたい、コピペで利用可能な、おしゃれでモダンなWebレイアウト25選をご紹介します。 すべてのテンプレートの特長が以下のとおり。 ✅ モバイルファースト・アプローチに沿ったレイアウト ✅ すべてのブレイクポイントに対応したレスポンシブWebレイアウト ❌ position: absolute;は利用しない ✅ CSS Grid テクニックのみで表現 最先端のCSSテクニックを活用することで、これまでは考えられなかった構図を実現できるようになっています。 コピペでできる、おしゃれな無料レイアウト25選（CSS Grid & Flexbo

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。 あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ？（2022年版） 国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。 5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。 3年前の2019年にアンケートをしたとき（参照記事）は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。

2022年6月29日 Webサイト制作, フリーランス Webデザイナーやフロントエンドデベロッパーを目指す方から、よく勉強方法を聞かれることがあります。彼らなりに調べて、あれこれ学習を続けているようなのですが、「このやり方でいいのか？」と不安に感じるときもあるようですね。ということで今回は私の経験をもとに勉強するときのコツをまとめてみます。具体的な学習内容については各々の目的によって異なると思いますし、「ロードマップ」なるものが巷で出回っているので今回は割愛。 ↑私が10年以上利用している会計ソフト！ いろんなWebサイトを見る 初学者と経験者では見てきたWebサイトの数が圧倒的に違います。いろんなジャンルのWebサイトを見る習慣をつけるといいでしょう。ただ眺めるだけではもったいない！いいなと思ったところや改善できそうなところを探っていくと、自分の引き出しが増えていくはず。コーディング面

ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。 この記事では、そんな面倒なWeb制作を楽にするお役立ち最新オンラインツールをまとめてご紹介します。 頭を抱える配色えらびから、おしゃれイラストのダミー生成ツールや、商用利用もできるHTMLテンプレートなど、時間のかかっていた作業を時短できる新サービスがぞくぞく増えています。 自分だけの最強ワークフロー術として、この機会に活用してみてはいかがでしょう。 カテゴリごとに整理しています、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新

グラデーションは、もはやレトロ系の90年代トレンドというわけでなく、あらゆるウェブのUIデザインで人気となっています。 背景デザインやボタン、トグル、カード、さらには影シャドウなどあらゆる要素に採用されており、多くのウェブサイトやDribbble、Behanceなどでもよく見かけます。 グラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことで、さまざまな使い方があります。 繊細で控えめな色の組み合わせから、ダイナミックでポップな色使いまで、多様性があるため、デザインやブランドの雰囲気を伝えるのにも、グラデーションは使用できます。 この記事では、現役デザイナーが実践しているグラデーションをより魅力的にするヒントと秘訣をご紹介します。 適切なインスピレーションを見つけよう まず、グラデーションの参考となるインスピレーションを探してみましょう。 グラデーションの最高のインスピ