新着記事

「SEOって難しそう…」と感じていませんか？実は、基本的な用語を理解すれば、SEO対策はグッと身近になります！ここでは初心者が知っておくべきSEO用語をわかりやすく解...

「構造化データ」とは、検索エンジンがウェブサイトの内容をより正確に理解できるように、情報を整理してマークアップする仕組みです。特に検索結果の見た目を向上させ...

ある2月の朝、何気なくWordPressのプラグインを更新したところ、突然以下のエラーメッセージが表示されました。 「このWebサイトに重大なエラーが発生しました。サイト...

CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使え...

ウェブサイトでよく見かける 3本線のアイコン=　ハンバーガーメニュー。スマホサイトやタブレットなど、画面が小さいデバイスで使われます。ここでは、HTML/CSS/JavaScr...

Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数...

Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの...

JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみ...

CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり...

Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリック...

ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント...

JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押...

Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが...

WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する...

デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。...

WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成...

ウェブデザイン技能検定3級は、ウェブ制作に必要な基礎知識を問う国家資格で、これからウェブ業界を目指す方やスキルを証明したい初心者に人気の試験です。この記事では...

デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者...

Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それ...

Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけ...

「WordPress」という言葉を聞いたことはありますか？ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える...

サイトやアプリを作成するとき、欠かせないのが「アイコン」です。アイコンはデザインのアクセントになるだけでなく、ユーザーが直感的に操作できるデザインを作るため...

WordPressの最新フルサイトテーマ『Twenty Twenty Four』を使って、理想のサイトをゼロから作成してみます！デザインカンプはFigmaで作成したもので、このカンプ通りに...

Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、...

「ウェブデザイン技能検定3級（令和5年度第2回）」の学科試験を解説します。この試験は、ウェブデザインに関する基礎知識を問う国家資格で、初心者にも人気です。この記...

Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー...

Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザ...

初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤ...

Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操...

「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でも...

楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います...

HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアク...

授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染み...

「令和5年度第1回ウェブデザイン技能検定3級」の学科試験を徹底解説！本試験は、HTMLやCSS、デザイン基礎などを問う国家資格です。過去問を分析し、効率的な学習方法や...

Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画...

中央に正方形を意識した分割バナーの作成　 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナー...

ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです！ ま...

まずはどういったものか？動画をチェック 動画時短モード 約1時間の動画になりますので、問題の１（作業の１）だけを見たい・・・という方は、下記の時短モードのリンク...

Illustratorのペンツールは、誰もが苦手意識を持ちやすい機能の一つです。特に曲線を描くときに登場する「方向線」に戸惑い、「どちらを見ればいいのかわからない」と感...

IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか...

ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できる...

今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していき...

在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は...

ポートフォリオとは？ 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業...

バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し...

今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力...

イラストレーターで曼陀羅模様を作ろう！ Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形...

中央に正方形を意識した分割バナーの作成　 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナー...

レンタルサーバーを契約する前に、まずは自分のパソコンでWordPressを使いこなせるように練習したいと考えていませんか？実は、WordPressはレンタルサーバーを利用しな...

在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記の...

Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画...

在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成し...

Illustratorの基本講座となります。iPhone のホーム画面にある見慣れたホームアイコンを作成する講座です。ここでは、基本図形の書き方やそれを使っての新しいオブジェ...

ポートフォリオのデザインカンプを作成する際には、以下のステップになります。 目的を明確にする：ポートフォリオの目的は何か、何を伝えたいのかを明確にすることが重...

「令和5年度第1回ウェブデザイン技能検定3級」の学科試験を徹底解説！本試験は、HTMLやCSS、デザイン基礎などを問う国家資格です。過去問を分析し、効率的な学習方法や...

WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分...

glyphsは1250種類以上の無料で使えるSVGアイコンをダウンロードできるサイトです。素材が全てSVGなのでサイズやカラーも簡単に変更してダウンロード可能です。ポートフ...

Visual Studio Code（VSC）は、軽量で高機能なプログラムを記述するための、コードエディタとして広く利用されています。便利な拡張機能（プラグイン）を活用することで...

ウェブデザイン技能検定　3級　実技のための解説を行っています。 Web業界唯一の国家検定　ウェブデザイン技能士をめざすウェブデザイン技能検定は、初めての方でも比較...

Webデザインのお仕事をする中で、魅力的な写真素材は欠かせません。しかし、どの写真素材サイトを選べば良いのか迷うことも多いはずです。そこで、今回は現役Webデザイ...

職業訓練校などでウェブデザイン技能検定に受検された方のお話しを少しまとめてみました。 ウェブデザイン技能検定ー実技編 ウェブデザイン技能検定は、当日　実技問題...

授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染み...

ウェブデザイン技能検定　学科　令和３年度の１回目（3級）の過去問解説を行っています。 前回に引き続き令和３年度の過去問のトライです！ 今回の課題では、通常通りア...

ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法...

Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは、どういった資格なのでしょうか？試験をうけるためには、何が必要なのでしょうか？ ここで...

今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフ...

HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス　株式会社</title> <link rel="style...

初心者の方むけのホームページ作成講座 インターネットが生活の一部となった今、ホームページは情報を発信したり、自分やビジネスをアピールしたりするための強力なツー...

ウェブデザイン技能検定　学科　令和３年度の２回目（3級）の過去問解説を行っています。 「学科令和３年度の２回目（3級）」の課題では、通常通りアクセシビリティやユ...

ポートフォリオとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は...

初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤ...

Webデザインを行う上で、レンタルサーバーの選択は非常に重要です。使い安く良いレンタルサーバーを選ぶことで、サイトの速度や安定性、セキュリティなど、様々な面でメ...