AIを活用したミニアプリ・業務改善ツール制作を始めました
小さなWebアプリや業務改善ツールの制作サイト「fmiyako.com」を公開しています Webサイト制作やWordPress構築に加えて、最近は 小さなWebアプリ・業務改善ツールの制作 にも力を入れています。 その制作例や相談窓口として、fmiyako.com というアプリサイトを作成しました。 fmiyako.com では、予約システム、問い合わせフォーム、見積もり...
Figmaで作ろう！バナー講座 入門編
Figmaを使って、実際のバナー制作と同じ流れで進めていきましょう。今回は、よくある ECサイトのセール告知バナー を題材に、次のステップで解説します。 依頼文から必要な情報を整理する バナーの文言を最適化する（短く・伝わりやすく） ガイド（グリッド）を引く 文字のレイアウト・書体選び 配色・コントラストの調整 情報の優先度に合わ...
まだ画像がない？そんなときに便利なダミー画像生成ツールの紹介
Webサイトの制作を進めていると、まだ写真素材や本番用の画像が揃っていないという場面によく遭遇します。特にクライアントワークや自社サイトの制作においては、「とりあえず仮画像でレイアウトだけ先に仕上げたい」というケースも少なくありません。 そんなときに役立つのが「ダミー画像ジェネレーター」です。あらかじめ決まったサイズや...
WebTraining.jpにてFigma基礎講座をスタート
FukuokaMiyako が運営する学習サイト WebTraining.jp にて、このたび新しく Figma 基礎講座 を公開しました。 WebTraining はこれまで、HTML / CSS / JavaScript / PHP を中心とした「コードに強いオンライン学習サイト」として運営してきました。訓練や企業研修の教材としても利用されており、実践的なコーディングスキルを身につけたい方に...
【初心者OK】JavaScriptでAPIを使ってみよう｜写真が自動で変わるスライドショー
はじめに｜APIって難しそう…？大丈夫、JavaScriptで、すぐに使えます 今回は、JavaScriptで、よく聞くAPIを使ってみましょう。 「APIってなんだか専門的な人が使うものでは？」「サーバーとかバックエンドの世界の話じゃないの？」 …と思ってしまいがちですが、実はそんなことはありません。HTML と JavaScript だけでも API を使ってデータ...
JavaScript02 応用編｜配列なし → ボタン操作 → 自動スライド → 無限ループ → レスポンシブ対応まで学べる自作スライドショー
JavaScriptでスライドショーを作る方法を学んだ前回（入門編）では、配列で画像を管理し、一定時間ごとに切り替える基本的な動きを実装しました。 今回の「応用編」では、その仕組みをさらに発展させ、実際のWebサイトで使えるレベルのスライドショーを、段階的に作り上げていきます。ただの画像切り替えではなく、以下のような機能を「ゼロ...
Webデザイン唯一の国家資格 ウェブデザイン技能検定とは?
Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは、どういった資格なのでしょうか？試験をうけるためには、何が必要なのでしょうか？ ここでは、ウェブデザイン技能検定とはどういったものか？どういった人たちが受験するのか？受験場所・受験期日は？受験内容は？勉強方法は？といった内容について詳しく解説して...
VPSとは？初心者にもわかる仕組みとレンタルサーバーとの違い・活用例を解説
「VPSって聞いたことはあるけど、なんとなく難しそう…」そんなイメージを持っていませんか？ 実は今、VPSは初心者でも気軽に使える時代になっています。WordPressだけじゃなく、自分専用の開発環境やコミュニティサイト、オリジナルWebサービスまで自由に構築できるのがVPSの魅力です。 この記事では、レンタルサーバーとの違いや、VPSででき...
Part4：CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わりやすさ、視認性、操作性を向上させる大切なステップです。使用しているCSSファイルの構成をもとに、重要なポイントを丁寧に解説していきます。 サンプルコード HTML+CSS ...
Part3：HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap
デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。最初のステップでは、デザインにとらわれすぎず、内容に合わせた正しいHTMLマークアップを意識することが大切です。以下に、完成形となるポートフォリオのサンプルサイトを掲載していますので、最終的なイメージとして参考にしてください。 ポートフォリオサンプルサ...
Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順
ポートフォリオのデザインカンプとは？ ポートフォリオは、自分のスキルや実績を伝えるための重要なツールです。特にWeb系の職種では、見た目の印象や情報の伝え方がそのまま評価につながることも少なくありません。 ここではFigmaを使って1ページ構成のポートフォリオサイトのデザインカンプを作成する手順を紹介します。実際に使用した構成...
metaタグの正しい使い方 SEOとSNSシェアを最適化する設定方法
Webページを作成する際に欠かせないのが meta要素 です。meta 要素は、ページの情報をブラウザや検索エンジン、SNSに伝える役割を持っています。検索結果の説明文をカスタマイズしたり、SNSでページをシェアしたときに正しい画像やタイトルを表示させたりするのに使われます。 meta要素とは？ meta 要素は、HTMLの <head> 内に記述し、...
SEO初心者必見！よく使う基本用語とその活用術
「SEOって難しそう…」と感じていませんか？実は、基本的な用語を理解すれば、SEO対策はグッと身近になります！ここでは初心者が知っておくべきSEO用語をわかりやすく解説し、実際の活用法も紹介します。 SEOの基本用語（まずはこれだけ！） SEO（検索エンジン最適化）とは？ Webサイトを検索結果の上位に表示させるための対策。あなたのサイ...
初心者でも簡単！JSON構造化データジェネレーターとリッチリザルトテストの使い方
「構造化データ」とは、検索エンジンがウェブサイトの内容をより正確に理解できるように、情報を整理してマークアップする仕組みです。特に検索結果の見た目を向上させるリッチリザルト（リッチスニペット）を狙う際には、構造化データの正しい実装が非常に重要になります。この記事では、初心者でも扱いやすいJSON形式の構造化データを生成...
WordPressのプラグイン更新でサイトが落ちた！トラブル解決の手順まとめ
ある2月の朝、何気なくWordPressのプラグインを更新したところ、突然以下のエラーメッセージが表示されました。 「このWebサイトに重大なエラーが発生しました。サイトの管理者のメール受信箱で手順を確認してください。問題が解決しない場合は、サポートフォーラムをお試しください。WordPressのトラブルシューティングについてはこちらをご...
CSSの便利な関数まとめ！デザインやレイアウトを自在に操る
CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使えば フォントサイズをレスポンシブに調整 できます。また、conic-gradient() で 円グラデーション を作成したり、rotate() で 要素を回転 させるなど、アニメーションやビジ...
JavaScript入門: クリックイベントで学ぶハンバーガーメニューの作り方
ウェブサイトでよく見かける 3本線のアイコン= ハンバーガーメニュー。スマホサイトやタブレットなど、画面が小さいデバイスで使われます。ここでは、HTML/CSS/JavaScriptを使って段階的にハンバーガーメニューを作成し、サイトに設置できるように練習してみましょう ハンバーガーメニューとは？ ハンバーガーメニューは、画面上に収まりき...
JavaScript03: スクロールイベントでWebを動かそう
Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数を使っての画像の表示。IntersectionObserverを使ったスクロールの監視などを行います！ スクロールイベントで表示・非表示を切り替える JavaScriptを使ったスクロールイベ...
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解説やタイプ別の特徴、おすすめの使い方。さらに最新を取り入れた「2024年モダンリセットCSS」をご紹介します。 リセットCSSとは？ リセットCSSは、各ブラウザがデフォル...
JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ(入門編）
JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみます。 最初はシンプルな構造から始め、フェードするスライドショーから、横に移動するスライドショーへの変更などをJavaScriptのみで行います。記事が長くなったので、この...
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり、無意識のうちに時間と労力を浪費する原因にもなります。そんな"ありがちな30のCSSミス"を具体的なコード例と改善策を解説します。基礎を固めたい方や効率的なスタイリング...
JavaScript01 : クリックで実現する基本的な動き
Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリックしたらメッセージを表示しよう クリックでボタンのテキストやスタイルを変更しよう ボタンをクリックして新しい要素を追加しよう ボタンをクリックするたびに背景色を変更し...
Illustrator ロゴデザイン。企業のロゴから学ぶ。シンプルなロゴが作れるようになろう！
ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自信を表す形なので、ともすれば情報が多くなり、ロゴの中にたくさん要素が入り、反対にわかりにくいものになりがちです。ロゴは、一瞬でわかる印象が必要なので、シンプル...
JavaScript超入門: ゼロからはじめるWebプログラミング
JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押したときに画面が変わる動きや、データを入力したときのチェックなどに使われます。 なぜ使うの？ Webページをただ「見る」だけでなく、ユーザーが操作できるようにするた...
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています。 クラス名が重要な理由 HTML/CSSのクラス名は、Webサイトやアプリケーションの構造...
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する際は、CSSの量が増え、メディアクエリの追加が多くなりがちです。その結果、コードが複雑になり、管理が難しくなることも。そんなときに役立つのが、BootstrapのようなCSSフ...
Webデザイナーがオススメする「ブランドロゴにも使われている」超ド定番フォント 欧文・日本語
デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しかし、数多くのフォントからどれを選べば良いのか迷ってしまうことも少なくありません。 Webデザイナーが実際に使っている定番フォントを欧文フォントと日本語フォントに...
PHP初心者が挑戦できる！WordPressオリジナルテーマを作る！必要最小限編
WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成することで、完全にデザイン通りのサイトを構築することができます。しかし、「オリジナルテーマはPHPが難しそう」「どこから始めればいいのか分からない」という方も多い...
誰もが最初はわからない。独特のWebデザイン用語。どういう意味ですか？が聞けない時。
デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者には馴染みが薄いものや、聞き慣れない言葉がたくさんあります。でも、「これってどういう意味ですか？」と気軽に聞けない雰囲気だったり、今さら聞くのが恥ずかしいと感じ...
Photoshop ぶっちゃけ範囲選択多すぎ！Webデザイナーは何を使っていますか？
Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それぞれに得意分野があります。 しかし、この多様性こそが、他のツールやサービスにはないPhotoshopの大きな魅力でもあります！ 目的や作業内容に応じて最適なツールを選ぶこ...
Phoroahop レイヤースタイルを使って「プロフェッショナルな見た目」を作成！
Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけたり、光沢を追加したりといったエフェクトを簡単に適用できます。この機能をマスターすれば、バナー作成やロゴデザイン、ウェブ用グラフィック制作の幅が一気に広がります...
そもそもWordPressって何？覚える必要ってあるの？
「WordPress」という言葉を聞いたことはありますか？ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える価値があるのか疑問に思っている方も多いかもしれません。この記事では、WordPressの基本とそのメリット、そして学ぶべき理由についてわかりやすく解説します。 Wordpress.o...
サイト作成時は必須！便利なアイコンサイトを集めました。人気ランキング一覧
サイトやアプリを作成するとき、欠かせないのが「アイコン」です。アイコンはデザインのアクセントになるだけでなく、ユーザーが直感的に操作できるデザインを作るための重要な要素です。また、アイコンにはシンプルだったり、シャープだったり、全体的に丸かったり、作成中のデザインにあうアイコンを選ぶのも大変。 そこで今回は、無料で利...
WordPressでフルサイトのテーマを使ってサイトを作成してみよう
WordPressの最新フルサイトテーマ『Twenty Twenty Four』を使って、理想のサイトをゼロから作成してみます！デザインカンプはFigmaで作成したもので、このカンプ通りにサイトをどこまで再現できるか挑戦します。初心者の方にもわかりやすく、デザインからサイト完成までの流れを解説していきます。 テーマ「Twenty Twenty Four」の特徴と利点...
WordPress で「簡単にお引越し」が可能なプラグイン All-in-One WP Migration
Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、ファイルだけ移動すればいいのかな？と思えるかもしれませんが、いくつかの理由で大変になることがあります。 サイト構造が複雑 WordPressサイトは、データベースとファイル...
Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です。これにより、実際のアプリやウェブサイトの操作感をシミュレーションできます。また...
