Webサイト制作– category –
-
Webデザイン唯一の国家資格 ウェブデザイン技能検定とは?
Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは、どういった資格なのでしょうか？試験をうけるためには、何が必要なのでしょうか？ ここで... -
VPSとは？初心者にもわかる仕組みとレンタルサーバーとの違い・活用例を解説
「VPSって聞いたことはあるけど、なんとなく難しそう…」そんなイメージを持っていませんか？ 実は今、VPSは初心者でも気軽に使える時代になっています。WordPressだけじ... -
まだ画像がない？そんなときに便利なダミー画像生成ツールの紹介
Webサイトの制作を進めていると、まだ写真素材や本番用の画像が揃っていないという場面によく遭遇します。特にクライアントワークや自社サイトの制作においては、「とり... -
Part4：CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わり... -
Part3：HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap
デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。最初のステップでは、デザインにとらわれすぎず、内容に合わせた正しいHTMLマークアップを意... -
Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順
ポートフォリオのデザインカンプとは？ ポートフォリオは、自分のスキルや実績を伝えるための重要なツールです。特にWeb系の職種では、見た目の印象や情報の伝え方がそ... -
metaタグの正しい使い方 SEOとSNSシェアを最適化する設定方法
Webページを作成する際に欠かせないのが meta要素 です。meta 要素は、ページの情報をブラウザや検索エンジン、SNSに伝える役割を持っています。検索結果の説明文をカス... -
SEO初心者必見！よく使う基本用語とその活用術
「SEOって難しそう…」と感じていませんか？実は、基本的な用語を理解すれば、SEO対策はグッと身近になります！ここでは初心者が知っておくべきSEO用語をわかりやすく解... -
初心者でも簡単！JSON構造化データジェネレーターとリッチリザルトテストの使い方
「構造化データ」とは、検索エンジンがウェブサイトの内容をより正確に理解できるように、情報を整理してマークアップする仕組みです。特に検索結果の見た目を向上させ... -
WordPressのプラグイン更新でサイトが落ちた！トラブル解決の手順まとめ
ある2月の朝、何気なくWordPressのプラグインを更新したところ、突然以下のエラーメッセージが表示されました。 「このWebサイトに重大なエラーが発生しました。サイト... -
CSSの便利な関数まとめ！デザインやレイアウトを自在に操る
CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使え... -
JavaScript入門: クリックイベントで学ぶハンバーガーメニューの作り方
ウェブサイトでよく見かける 3本線のアイコン= ハンバーガーメニュー。スマホサイトやタブレットなど、画面が小さいデバイスで使われます。ここでは、HTML/CSS/JavaScr... -
JavaScript03: スクロールイベントでWebを動かそう
Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数... -
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの... -
JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ(入門編）
JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみ... -
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり... -
JavaScript01 : クリックで実現する基本的な動き
Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリック... -
Illustrator ロゴデザイン。企業のロゴから学ぶ。シンプルなロゴが作れるようになろう！
ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント... -
JavaScript超入門: ゼロからはじめるWebプログラミング
JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押... -
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが... -
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わせる必要があります。特に、スマートフォン対応のレスポンシブWebデザインを実装する... -
Webデザイナーがオススメする「ブランドロゴにも使われている」超ド定番フォント 欧文・日本語
デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。... -
PHP初心者が挑戦できる！WordPressオリジナルテーマを作る！必要最小限編
WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成... -
誰もが最初はわからない。独特のWebデザイン用語。どういう意味ですか？が聞けない時。
デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者... -
Photoshop ぶっちゃけ範囲選択多すぎ！Webデザイナーは何を使っていますか？
Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それ... -
そもそもWordPressって何？覚える必要ってあるの？
「WordPress」という言葉を聞いたことはありますか？ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える... -
サイト作成時は必須！便利なアイコンサイトを集めました。人気ランキング一覧
サイトやアプリを作成するとき、欠かせないのが「アイコン」です。アイコンはデザインのアクセントになるだけでなく、ユーザーが直感的に操作できるデザインを作るため... -
WordPressでフルサイトのテーマを使ってサイトを作成してみよう
WordPressの最新フルサイトテーマ『Twenty Twenty Four』を使って、理想のサイトをゼロから作成してみます！デザインカンプはFigmaで作成したもので、このカンプ通りに... -
WordPress で「簡単にお引越し」が可能なプラグイン All-in-One WP Migration
Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、... -
Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー... -
Figma基礎 コンポーネントとインスタンス
Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザ... -
Figma基礎 スマートフォン対応のワイヤーフレームの作成
初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤ... -
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操... -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でも... -
Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう！
楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います... -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアク...
