webデザイン

Web業界の職種と役割まとめ【成果物でわかる一覧】 導入 Web業界には「Webデザイナー」「フロントエンドエンジニア」「ディレクター」など多くの職種があります。しかし、これから学び始める人にとっては...

導入 「Webデザイナー＝見た目担当」「ディレクター＝進行役」。日本のWeb業界では、このようなイメージが定着しています。 しかし、海外、とくにGoogleやApple、Meta（旧Facebook）...

はじめに Webサイトの表示速度は、ユーザー体験やSEOに直結する重要な要素です。特にスマホでは、読み込みが3秒以上かかると約半数のユーザーが離脱するとも言われています。高速化はデザインや機能以上に成...

はじめに 「モバイルファースト」と聞くと、PCデザインをスマホ風にすることだと誤解している人をよく見かけます。しかし本来の意味はまったく異なり、Googleの公式施策（モバイルファーストインデックス：...

Canva・Figma・STUDIOの使い分け完全ガイド｜ 導入 「WebサイトやLPを作りたいけど、プログラミングはハードルが高い…」そんなときに役立つのが ノーコードツール です。 特に Canv...

「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて...

1. 模写から「考えるデザイン」へ Figmaでの模写は、Web制作初心者にとって「良いデザインに触れながら、再現力を高められる」最高の練習方法です。しかし、模写だけでは終わりません。次のステップは、...

【初心者向け】Webデザインのためのフォント選び完全ガイド｜迷わない選び方とおすすめ書体 はじめに｜フォント選びに自信がないあなたへ 「フォントを選ぶとき、なんとなくで決めてしまう」「見た目は気になる...

【Figma練習OK】3色配色で作るシンプルで伝わるバナーの作り方 はじめに｜配色に悩むあなたへ 「バナーを作るとき、配色がごちゃごちゃしてしまう」「センスに自信がなくて、毎回色選びで止まってしまう」...

はじめに｜「なんとなく」から抜け出すために UIデザインを始めたばかりの頃、よくある悩みが「何から手をつけていいか分からない」というもの。色を選んでみたり、フォントを変えてみたり、ボタンをそれっぽく置...

使用したFigmaテンプレート このテンプレートの特徴 模写のルール（今回の練習方針） 「配色センスを鍛える」ことがテーマなので、余白や配置も含めて丁寧に再現することを意識しましょう。 HTML / ...

📷 pictureタグで画像を画面幅ごとに切り替える方法【体験デモ付き】 Web制作において、画像の出し分けは非常に重要です。スマートフォン、タブレット、PCといった異なる画面サイズごとに、最適な画像...

Webサイトのファーストビューにおいて、印象的な表現はユーザーの視線を惹きつけ、記憶に残る導線を作ります。その中でも、「文字の中に背景が透ける」という手法は、視覚的なインパクトがありつつ、情報の伝達性...

🧠 導入｜デザイン参考が“ノイズ化”していませんか？ 「PinterestやInstagramで“良いデザイン”を探しているのに、なんだかピンとくるものが少ない…」 そんな経験はありませんか？ 今や、...

はじめに｜“あえて”を言い訳にしていませんか？ 「このデザイン、ちょっとごちゃついてませんか？」「いや、あえてこうしてるんです」 ──Webデザインの学習初期にありがちなのが、「“あえて”を理由に根拠...

Webデザインの設計を学ぶ中で、よく見かける失敗の一つに「グリッドレイアウトが崩れている」ことがあります。見た目はきれいにみえても、設計の本質において、グリッドの有無は越えては通れないキーポイントです...

はじめに Webデザインの世界で、「よく見える」と言われるレイアウトには、多くの技術的背景が存在します。その一つに、「美しさを数学的に扱う」仕組みとしての「デザイン比率」があります。 金の比率として知...

Figma模写シリーズ第6弾は、3つのカード型レイアウトのうち、どれか1つを選んで模写できる初級編です。 「全部模写するのはちょっと大変…」という方も、1枚だけでもOK！HTMLとCSSの基本だけで完...

「Webデザインツールに最適なMacBookが欲しいけど、価格がネック…」そんなWeb制作者・クリエイターの方に向けて、2025年現在、MacBookを安く購入する5つの方法を紹介します。 Apple...

Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦します。 大自然の写真を大胆に使った背景演出や、ナンバリング付きのセクション構成など、中級レベルにふ...

Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦します。 構造は一見シンプルに見えますが、検索フォームやセクションごとのカードUIなど、設計・再現ともに...

Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム...

Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写...

Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグマ）という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され...

日本最速？阿部寛のホームページが爆速な理由 Web制作やフロントエンドの世界では、「表示速度」や「軽量化」は日常的に語られる大切なテーマです。しかし、そんな技術的な話題を飛び越えて、**ネタとしても愛...

ランディングページはSEOに弱いって本当？ 「ランディングページ（LP）はSEOに不利」と言われることがあります。確かに、1ページ完結の構造は情報量が限られ、検索エンジンの評価を受けづらいという面もあ...

ノーコードだけじゃ稼げない！フリーランスWeb制作者の成長ステップ 「初心者からフリーランスWeb制作者を目指すには何から学べばいい？」「ノーコードでLPが作れても、仕事は続けられるの？」 この記事で...

このページは、ファッション雑誌の世界観をWeb上で再現したLP（ランディングページ）の模写練習用デモです。HTMLとCSSのみで構成されており、画像の使い方や余白の取り方、雑誌的なタイポグラフィを意識...

1. はじめに：Web制作とデュアルモニターの相性 Web制作の現場では、コードを編集しながらブラウザで表示を確認したり、デザインカンプを見ながら実装を行ったりと、複数の画面を同時に扱う機会が多いもの...

クロスグライドアニメーションとは？ スクロールアニメーションは、ページを移動する際に要素がフェードインしたりスライドしたりすることで、ユーザーの目を引く演出を行います。今回紹介するクロスグライドアニメ...