2024年– date –

Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています。 クラス名が重要な理由 HTML/CSSのクラス名は、Webサイトやアプリケーションの構造...

WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する際は、CSSの量が増え、メディアクエリの追加が多くなりがちです。その結果、コードが複雑になり、管理が難しくなることも。そんなときに役立つのが、BootstrapのようなCSSフ...

デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しかし、数多くのフォントからどれを選べば良いのか迷ってしまうことも少なくありません。 Webデザイナーが実際に使っている定番フォントを欧文フォントと日本語フォントに...

WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成することで、完全にデザイン通りのサイトを構築することができます。しかし、「オリジナルテーマはPHPが難しそう」「どこから始めればいいのか分からない」という方も多い...

デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者には馴染みが薄いものや、聞き慣れない言葉がたくさんあります。でも、「これってどういう意味ですか？」と気軽に聞けない雰囲気だったり、今さら聞くのが恥ずかしいと感じ...

Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それぞれに得意分野があります。 しかし、この多様性こそが、他のツールやサービスにはないPhotoshopの大きな魅力でもあります！ 目的や作業内容に応じて最適なツールを選ぶこ...

Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけたり、光沢を追加したりといったエフェクトを簡単に適用できます。この機能をマスターすれば、バナー作成やロゴデザイン、ウェブ用グラフィック制作の幅が一気に広がります...

「WordPress」という言葉を聞いたことはありますか？ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える価値があるのか疑問に思っている方も多いかもしれません。この記事では、WordPressの基本とそのメリット、そして学ぶべき理由についてわかりやすく解説します。 Wordpress.o...

サイトやアプリを作成するとき、欠かせないのが「アイコン」です。アイコンはデザインのアクセントになるだけでなく、ユーザーが直感的に操作できるデザインを作るための重要な要素です。また、アイコンにはシンプルだったり、シャープだったり、全体的に丸かったり、作成中のデザインにあうアイコンを選ぶのも大変。 そこで今回は、無料で利...

WordPressの最新フルサイトテーマ『Twenty Twenty Four』を使って、理想のサイトをゼロから作成してみます！デザインカンプはFigmaで作成したもので、このカンプ通りにサイトをどこまで再現できるか挑戦します。初心者の方にもわかりやすく、デザインからサイト完成までの流れを解説していきます。 テーマ「Twenty Twenty Four」の特徴と利点...

Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、ファイルだけ移動すればいいのかな？と思えるかもしれませんが、いくつかの理由で大変になることがあります。 サイト構造が複雑 WordPressサイトは、データベースとファイル...

Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また...

Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その...

初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバランスを整える 長方形ツール: ボタンや画像などの領域を作る テキストツール: 文字を入...

Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは何ができるツールなのか？ Figmaの特徴と得意なこと Figmaは、クラウドベースのデザイ...

「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でもよく使われる方法が FTP（File Transfer Protocol） を使ったアップロード・ダウンロードです。人気のFTPクライアントソフト「FileZilla」を使った具体的なアップロード手...

楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 まずは出来上がりから確認 横幅1280px、高さ720px（アスペクト比16:9) 解像度72ppiのアイキャッチにも使えるバナーサイズです。Photoshopの「埋め込みを配置」「オブジ...

HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアクセシビリティの面で大きな問題が発生することがあります。適当なマークアップがもたらす影響も考えて記述する必要があります。 HTMLのマークアップとは？ HTML（Hypertext ...

授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みのない発音をするものも少なくありません。そのため、授業中に間違った読み方をしてしまい、「先生、それ違うのでは？」と指摘されてしまったことも正直あります（少し恥ず...

Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画面（ダッシュボード）の外観から選択して簡単にセッティングすることができます。 また、外観 ＞ 新規追加 ＞アップロードを行って、ダウンロードしてきた有料のテーマを、...

中央に正方形を意識した分割バナーの作成　 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーです。まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最初は1200px*630pxで作成します。OGPを意識して中央にタイトルを配置します。出来上がっ...

IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか？」というものがあります。クライアントからの納品時の形式依頼が、psdだったら、Photoshop。aiだったら、illustrator と決まりますが、そういった形式の決め事がない場合...

ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザーエクスペリエンス）が向上し、伝達が効果的になります。さらに、ブランドの特定の雰...

様々なサイトで、UIデザインにぴったりのSVG及びPNGアイコンが無料で使えるTabler Icons Over 4900 pixel-perfect icons for web design このサイトでは、4944以上の種類のアイコンを利用することができます。これらのアイコンはどれもバランスが取れており、サイズを変更することができるため、大きなサイズにしても線の太さを調...

3回目のWordPress（ワードプレス）初心者向け講座では、よくある会社のウェブサイトを想定した固定ページの作成と、固定ページを作成したあと、ヘッダー・フッター・モバイルのメニュー反映までを行なっています。 Wordpress基礎講座の１回目・２回目の続きでもありますので、まだの方は、ぜひ下記の動画からご参照ください。 動画をチェック...

今回のWordPress（ワードプレス）初心者向け講座（2回目）では、前回に引き続き、設定したテーマに必要なプラグインを最小限に絞り、その導入と有効化、そしてダッシュボードの確認方法について解説いたします。前回の講座のテーマ設定から、さらに機能を拡張していきます。 ポイントとしては、プラグインの選定には注意が必要だということで...

WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分があります。そういった時に、いくつかの必須のプラグインを導入することで、使い勝手がよくなります。 ここでは、WordPressの設定をする際におすすめの最小限のプラグイン...