Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。

この記事では、複数のメディアで高評価を得ている信頼性の高いギャラリーサイトを厳選してご紹介します。それぞれのサイトの特徴や活用方法もあわせて解説していきますので、ぜひ最後までご覧ください。

更新頻度が高く使いやすい定番ギャラリーサイト

I/O 3000で最新のデザイントレンドをキャッチ

I/O 3000 | Webデザインギャラリー

多くのデザイナーから支持を集めているI/O 3000は、使いやすさと掲載サイトの質の高さが特徴です。検索機能が非常に充実しており、カラーやカテゴリだけでなく、キーワードでの検索も可能です。特に「アニメーション」や「スクロール演出」といった実装方法からの検索ができるため、特定の表現方法を探している際に重宝します。

また、掲載されているサイトは見栄えだけでなく、情報設計の面でも優れたものが多く選ばれています。デザインの見た目の参考だけでなく、ユーザー体験を考える上でも非常に参考になるギャラリーサイトです。

MUUUUU.ORGで縦長デザインのトレンドを把握

Webデザインギャラリー・参考サイト集｜MUUUUU.ORG

スマートフォン時代を反映して、現代のWebデザインでは縦長のレイアウトが主流となっています。MUUUUU.ORGは、そんな現代のトレンドを意識した縦長デザインに特化したギャラリーサイトです。

特筆すべきは更新頻度の高さで、ほぼ毎日新しいサイトが追加されています。国内サイトだけでなく、海外の優れたデザインも多く掲載されているため、グローバルなデザイントレンドを把握する上でも非常に有用です。業種やデザインテイスト、使用されているカラーなど、多彩なカテゴリで検索できるため、求めているデザインイメージにたどり着きやすいのも特長です。

81-web.comで日本のWebデザインを徹底研究

81-web.com : 日本のWebデザイン・Webサイトギャラリー＆参考サイト・リンク集

日本のWebサイトに特化したギャラリーサイト「81-web.com」は、国内のデザイントレンドを把握するのに最適です。特筆すべきは、業界で唯一となるフォントからの検索機能です。和文フォントの選定は日本のWebデザインにおいて重要な要素ですが、このサイトではフォント別にデザインを参照できるため、フォントの印象やその使われ方を具体的に確認することができます。

また、掲載サイトはポップアップでPC版とスマホ版の両方を確認できる仕様になっているため、レスポンシブデザインの参考としても非常に使いやすい設計となっています。平日は1日1サイトのペースで更新され、安定した情報収集が可能です。

専門性が高いギャラリーサイト

ランディングページ制作には「LPアーカイブ」が必須

LPの最新デザインまとめ参考サイト｜LP アーカイブ

近年、マーケティング施策としてランディングページ（LP）の重要性が高まっています。LPアーカイブは、そんなLP制作に特化した国内最大級のギャラリーサイトです。

このサイトの特筆すべき機能は、キャッチコピーの一覧表示機能です。LPにおいて最も重要な要素の一つであるキャッチコピーを、効率的に比較検討することができます。また、PCとスマートフォンの両方のデザインを確認できる機能も備えており、デバイスごとの最適な表現方法を学ぶことができます。

レスポンシブデザインは「Responsive Web Design JP」で学ぶ

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

マルチデバイス対応が当たり前となった現在、レスポンシブデザインの重要性は言うまでもありません。Responsive Web Design JPは、その名の通りレスポンシブデザインに特化したギャラリーサイトです。

最大の特長は、PC・タブレット・スマートフォンの3つの画面サイズを横並びで表示できる点です。デバイスごとのレイアウトの違いや、コンテンツの見せ方の工夫を一目で比較することができます。掲載されているのは日本国内のサイトのみですが、それぞれのサイトの質が高く、実務に即した参考事例として活用できます。

UI部品設計は「Parts.」でインスピレーションを得る

Parts. – パーツ別Webデザイン集

WebサイトのUI部品の設計において、「Parts.」は非常に有用なリソースとなります。ヘッダーやフッター、お問い合わせフォームなど、サイトの基本的な構成要素を部品別に参照できることが最大の特徴です。

特にSaaS系のサービスサイトのUIデザインが充実しており、使いやすさを重視したモダンなデザインの参考として重宝します。単なるデザインの参考だけでなく、UIの実装方法を考える際にも大いに参考になるでしょう。

世界のトレンドを押さえる「Awwwards」

Awwwards – Website Awards – Best Web Design Trends

Webデザインの世界的なアワードとして知られるAwwwardsは、単なるギャラリーサイト以上の存在です。ここで紹介されるサイトは、デザイン性だけでなく、技術面やユーザビリティの観点からも高い評価を受けたものばかりです。

特に、インタラクティブな表現やアニメーションなど、最新のWeb技術を活用した革新的なデザインを多く見ることができます。日本のWebデザインとは異なる斬新な表現に触れることで、新しいデザインのアイデアやインスピレーションを得ることができるでしょう。

ギャラリーサイトを効果的に活用するために

ギャラリーサイトは非常に有用なツールですが、ただ漫然と眺めているだけでは効果的な活用とは言えません。デザインの参考にする際は、以下のような点を意識することが重要です。

まず、制作するサイトの目的やターゲットユーザーを明確にした上で、それに合致する参考事例を探すようにしましょう。例えば、コーポレートサイトを制作する場合は、81-web.comのような信頼性の高いサイトを中心に探すことをお勧めします。

また、一つのギャラリーサイトだけでなく、複数のサイトを併用することで、より多角的な視点を得ることができます。国内のギャラリーサイトと海外のギャラリーサイトを組み合わせることで、グローバルなトレンドも把握できるでしょう。

さらに、デザインを参考にする際は、単なる見た目の模倣ではなく、「なぜそのようなデザインになっているのか」という背景や意図を考察することが重要です。それによって、自身のデザインスキルの向上にもつながります。

まとめ

本記事で紹介したギャラリーサイトは、いずれも実務で即活用できる充実したコンテンツを提供しています。それぞれのサイトの特徴を理解し、目的に応じて使い分けることで、より効率的なデザイン制作が可能になるでしょう。

ただし、これらはあくまでも参考資料であり、最終的には独自の創造性を発揮することが重要です。クライアントの要望やターゲットユーザーのニーズを十分に理解した上で、オリジナリティのあるデザインを生み出していきましょう。

ぜひ、本記事で紹介したギャラリーサイトを活用して、より良いWebデザインの制作に取り組んでみてください。

Webデザインって本当に独学で習得できるの？

どんなスキルが必要？

実際にWebデザイナーになれるの？

そんな疑問を持つ方も多いのではないでしょうか。適切な学習方法と継続的な努力があれば、独学でもWebデザイナーになることは十分可能です。この記事では、未経験からWebデザイナーを目指す方に向けて、効率的な学習方法や必要なスキル、おすすめの教材をご紹介します。

1. Webデザイン独学の可能性と現実

Webデザインは本当に独学で習得できるのか？

結論から言うと、Webデザインは独学で習得できます。

私自身、学生時代からWebデザインに興味を持ち、1年間の独学を経て新卒でWebデザイナーとして就職しました。当初は頻繁な修正に苦労しましたが、経験を積むにつれて上達。現在は、案件に応じてディレクションやフロントエンド開発など、多様な役割をこなす「カメレオン型」エンジニアとして活動しています。

Webデザインに必要なスキルは多岐にわたります：

• デザインの基礎知識
• グラフィックソフト操作能力
• UI/UXデザインのスキル
• コーディングスキル
• プロジェクト管理とコミュニケーション能力

これらを習得し、業務として求められるクオリティに達するまでには、最低でも3〜4ヶ月を要します。特に、グラフィックソフトの操作やデザイン能力は継続的な練習が不可欠であり、さらに時間を要する場合もあります。

独学でWebデザインを学習するには、以下のような資質が適していると考えられます：

独学でWebデザイナーになるまでの現実的な期間

独学でWebデザイナーになるまでの期間は、個人の学習速度、既存のスキル、目標レベルによって大きく異なります。一般的な目安として：

• 初心者の場合：基礎的なスキルを習得し、簡単なWebサイトを作成できるようになるまでに3〜4ヶ月程度
• プログラミングやデザインの経験がある場合：実務レベルに達するまで3ヶ月程度

ただし、これらは目安に過ぎません。社会人として日中働きながら学習する場合、1日あたりの学習時間が限られるため、上記の2〜3倍の期間を要する可能性があります。

独学とスクール学習の比較：メリットとデメリット

Webデザインの学習方法には、独学とスクール学習の2つの主要なアプローチがあります。それぞれにメリットとデメリットがあります。

1. コスト比較： 独学は基本的に無料または低コストで始められますが、スクールは高額な授業料が必要です。ただし、スクールでは体系的なカリキュラムと専門家のサポートが得られるため、長期的には効率的な学習が期待できます。
2. 学習効率の違い： スクールでは専門家による指導と体系的なカリキュラムにより、効率的に学習を進められます。一方、独学では自分のペースで学べる反面、方向性を見失ったり、非効率な学習方法に陥る可能性があります。
3. キャリアサポートの有無： 多くのスクールでは、就職や転職のサポートが付属しています。これには、ポートフォリオの作成支援、面接対策、企業とのマッチングなどが含まれます。独学の場合、これらのサポートは自力で行う必要があります。
4. 自己管理能力の重要性： 独学では自己管理能力が非常に重要です。学習のペース配分、モチベーションの維持、目標設定など、すべて自分で行う必要があります。一方、スクールでは外部からの刺激や締め切りがあるため、比較的モチベーションを保ちやすい環境にあります。

独学とスクールのどちらを選択するかは、個人の学習スタイル、目標、予算、時間的制約などによって異なります。独学の柔軟性とコスト効率の良さを活かしつつ、オンラインコミュニティや短期集中講座などを適宜活用することで、両者のメリットを最大限に引き出すことができるでしょう。

重要なのは、自分に合った学習方法を見つけ、継続的に実践していくことです。

2. Webデザイナーに必要不可欠なスキルセット

HTML/CSSの基礎から応用まで

特に、レスポンシブデザインの実装は、多様なデバイスでの表示を考慮する現代のWebサイト制作において不可欠です。

JavaScriptの基礎

JavaScriptは、動的で対話的なWebサイトを作成するために不可欠な言語です。HTMLとCSSの基礎を固めた後、JavaScriptの学習に進むことで、より高度なWebデザインが可能になります。

JavaScriptの学習は段階的に進めることが重要です。以下のような段階的なアプローチが効果的です：

1. 基本文法と変数の理解
2. 関数とオブジェクトの概念把握
3. DOM操作の基礎
4. イベントハンドリング
5. 非同期処理（Promises, async/await）
6. フレームワーク入門（React, Vue.js）

デザインツールマスター：Figma, Photoshopの使い分け

Webデザインの現場では、複数のデザインツールを使いこなすことが求められます。主要なツールとしてFigmaとPhotoshopがあり、それぞれに特徴と適した用途があります。

UI/UXデザインの基本原則と最新トレンド

UI/UXデザインは、ユーザーにとって使いやすく魅力的なデジタル製品を作るための重要な分野です。効果的なUI/UXデザインを実現するためには、以下の要素を理解し、実践することが重要です：

• ユーザー中心設計（UCD）の概念
• 情報アーキテクチャの基礎
• 2024年注目のUIトレンド
• アクセシビリティの重要性

これらの要素を適切に組み合わせることで、ユーザーのニーズに応え、競争力のあるデザインを生み出すことができます。

3. 効率的なWebデザイン独学のステップ

学習計画の立て方：短期・中期・長期目標の設定

Webデザインを独学で学ぶ際、効果的な学習計画を立てることが重要となります。独学でWebデザインをマスターするには、短期・中期・長期の目標設定と、それを実現するための具体的なツールの活用が重要です。

以下では、独学者向けの目標設定方法と実践的なツールについて詳しく解説します。

SMART目標設定法

SMART目標設定法は、具体的で達成可能な目標を立てるための効果的な方法です。SMARTとは以下の頭文字を表し、目標として機能するためのチェック項目です。

Specific（具体的）：「HTMLとCSSの基礎を学ぶ」ではなく、「HTML5の主要タグを20個覚え、簡単なウェブページを作成できるようになる」など、具体的な目標を設定します。

Measurable（測定可能）：進捗を具体的に評価できる指標を設定します。
例えば、「1週間に3つのミニプロジェクトを完成させる」や「1ヶ月でHTMLとCSSの基礎講座を80%以上の理解度で修了する」など、明確な数値目標を立てることで、自分の成長を客観的に把握できます。また、「デザインソフトの主要機能を20個マスターする」といった具体的なスキル習得目標も効果的です。

Achievable（達成可能）：現実的で達成可能な目標を設定します。
例えば、初心者の場合、「1ヶ月でHTML/CSSの基礎を学び、シンプルな静的ウェブページを作成する」といった目標が適切です。複雑なウェブアプリケーションの開発は、スキルと経験を積んだ後の中長期的な目標として設定するのが望ましいでしょう。目標設定の際は、自身の現在のスキルレベルと利用可能な時間を考慮し、段階的に難易度を上げていくことが重要です。

Relevant（関連性）：長期的なキャリア目標に沿った目標を設定します。
例えば、「Webデザイナーとして活躍したい」という長期目標がある場合、「3ヶ月以内にHTMLとCSSを使って5つの異なるレイアウトのウェブページを作成する」といった具体的な目標を立てます。これにより、日々の学習が将来のキャリアにどのように結びつくかを明確に意識しながら進めることができます。

Time-bound（期限付き）：「いつまでに」という明確な期限を設定します。

週間・月間学習スケジュールの作成

効果的な学習を継続するためには、具体的なスケジュールを立てることが重要です。以下のステップで作成します：

進捗管理ツールの活用

学習の進捗を効果的に管理するために、以下のようなツールを活用することをおすすめします。

これらのツールを組み合わせて使用することで、効率的に学習を進め、目標達成に向けて着実に前進することができます。定期的に進捗を確認し、必要に応じて計画を調整することを忘れないでください。

オンラインリソースの活用法：無料・有料の学習プラットフォーム比較

Webデザインを勉強するには、参考書を使って勉強することもできますが、インターネット上でも教材が豊富にあり、活用して独学を進めていくこともできます。

有料のスクール

• デジハリ・オンラインスクール
  • 期間: 3ヶ月〜6ヶ月（コースにより異なる）
  • 金額: 266,310円〜439,560円（税込）
  • 特長: 総合的な学習環境と強力な業界ネットワークを活かしたキャリアサポートが魅力。経済産業省からの資格補助で最大70％キャッシュバック。
• デイトラ
  • 期間: 2ヶ月〜6ヶ月（学習ペースにより異なる）
  • 金額: 119,800円〜129,800円（税込）
  • 特長: 柔軟な学習スタイルと手厚い個別指導が特徴。転職を強く意識したカリキュラム設計。経済産業省からの資格補助で最大70％キャッシュバック。
• テックアカデミー
  • 期間: 2週間〜3ヶ月（コースにより異なる）
  • 金額: 273,900円〜526,900円（税込）
  • 特長: 幅広い価格帯と学習期間のオプションがあり、個々のニーズに合わせやすい。経済産業省からの資格補助で最大70％キャッシュバック。

YouTubeチャンネルおすすめ5選

YouTubeでもいくつかWebデザインを扱っているチャンネルがあり、内容も充実しているのとスクールより砕けた形で話してくれているので、頭に残りやすかったです。

• Webの神様
  • 特長: PC初心者の人からWebデザイン・HTMLなどのコーディングと網羅
  • おすすめ動画: こんな人はWebデザイナーに向いてる！と思う特徴５選
• Webデザインチャンネル | デイトラ
  • 特長: オンラインスクールデイトラのWebデザインに特化したチャンネル。勉強法方法やバナーの作成、面接や案件獲得などの習得後のコンテンツも充実
  • おすすめ動画: デザインの勉強を始められない人へ、習慣化させるコツ
• Mappy Photo
  • 特長: Adobe製品（特にPhotoshop）の使い方や、実践的なデザインテクニックを詳しく解説
  • おすすめ動画: YouTubeサムネイルデザインのコツ5選
• AdobeCreativeStation
  • 特長: Adobe公式チャンネルで、Creative CloudアプリケーションのTipsや最新機能の紹介、クリエイティブな使い方を提案
  • おすすめ動画:【サクッと学べるPhotoshop 01】ことはじめの歩き方
• ゼロイチWEBデザイン
  • 特長: 未経験からWebデザイナーを目指す人向けの実践的なアドバイスや、デザインツールの使い方を解説
  • おすすめ動画：【本当は教えたくない】デザイン力が爆上がりするデザイン本5選

Webデザインを扱っているWebサイト

Webデザインを学ぶには無料のサービスを使って独学も可能です。

• ドットインストール
  • 特長: 1つ3分程度の動画でHTML・CSS・JavaScriptなどの幅広いプログラム言語をカバー。スキマ時間を活用して勉強するのに適しています。
• progate（プロゲート）
  • 特長: ブラウザ上で直接ソースコードを書きながら学べる学習環境。Webデザインの基礎から、プログラム言語まで体系的に学習できるコースを提供しています。

書籍で学ぶ：2024年おすすめWebデザイン書籍10選

初心者向け入門書

1冊ですべて身につくHTML & CSSとWebデザイン入門講座／Mana

created by Rinker

• Kindle
• Amazon
• 楽天市場

HTML、CSS、Webデザインの基礎を1冊で学べる入門書です。初心者にも分かりやすい解説と豊富な図解で、実践的なスキルが身につきます。動画解説付きで学習効率が高く、モダンな技術にも対応しています。デザインセンスも磨ける内容で、Webサイト制作を始めたい方におすすめの一冊です。

プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック [ 千貫 りこ ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

HTML/CSSの基礎知識を持つ中級者向けのスキルアップ本です。実践的なテクニックや現場で役立つコーディング手法を学べ、プロの視点からの解説が特徴です。カラー図版が多く、見やすい構成になっています。ただし、著者の意見が強く出ている部分もあるため、批判的に読む必要があります。初心者には難しい内容ですが、スキルアップを目指す方には役立つ一冊といえるでしょう。

Webデザイナーや初心者向けのJavaScript入門書です。実践的なWebサイト制作に焦点を当て、分かりやすい解説と豊富な図解で基本から応用まで幅広く学べます。デザイン性の高いサンプルを使用し、モチベーションを維持しながらJavaScriptの基礎を身につけられる一冊です。

独学Photoshop 楽しく基本が身につくガイドブック [ Mappy Photo えりな＆たじ ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

初心者向けのPhotoshop入門書です。レイヤー、ツール、フィルターの3つの基本を軸に、分かりやすい解説と豊富な図解で学べます。YouTubeの動画解説と連動し、実践的なスキルが身につきます。初心者からPhotoshopを使い慣れた人まで、幅広い層におすすめの一冊です。

はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門 [ もち ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

Figma初心者向けの入門書です。基本操作から実践的なデザイン制作まで、カラー図解で分かりやすく解説しています。サンプルファイルのダウンロード特典付きで、手を動かしながら学べる構成になっています。一部の読者からは説明が不十分との指摘もあり、完全な初心者には少し難しい可能性があります。

デザイン理論の名著

ノンデザイナーズ・デザインブック第4版 [ ロビン・ウィリアムズ ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

デザインの基本原則を学べる入門書です。近接・整列・反復・コントラストの4原則を中心に、分かりやすい例示で解説しています。デザイナーでない人も実践できる内容で、日常的な資料作成やプレゼンにも役立ちます。ただし、英語圏向けの内容が多く、翻訳の読みにくさを指摘する声もあります。デザインの基礎を学びたい人におすすめの一冊です。

プロっぽいセンスが身につく デザインのきほん [ 木村宏明 ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

デザイン初心者向けの実践的な入門書です。豊富な作例と分かりやすい解説で、デザインの基本原則やテクニックを学べます。文字、色、レイアウトなどの使い方を具体的に示し、すぐに実務に活かせる内容になっています。プレゼン資料やSNS投稿など、日常的なデザインにも役立つ知識が詰まっており、デザイナーではない人にも分かりやすいと評価されています。デザインセンスを磨きたい人におすすめの一冊です。

とりあえず、素人っぽく見えないデザインのコツを教えてください! [ ingectar-e ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

デザイン初心者向けの実践的入門書です。豊富なBefore/After例で基本を視覚的に解説し、各ページが完結した構成で即実践可能。色のRGB/CMYK値やデジタルメディア向けのアドバイスも充実しており、すぐに使えるデザインスキルが身につきます。

最新技術トレンド解説本

これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで [ 山田 祥寛 ]

created by Rinker

• Kindle
• Amazon
• 楽天市場

Reactの基礎から応用までを網羅した包括的な入門書です。JavaScriptの基本から始まり、Reactの核心、Next.js、TypeScriptまでカバーしています。豊富なサンプルコードと詳細な解説で実践的なスキルが身につきますが、初心者には難しい部分もあります。ある程度のプログラミング経験がある人や、体系的にReactを学びたい人におすすめの一冊です。

プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで [ 鈴木 僚太 ]

created by Rinker

¥3,278 (2025/02/26 11:19:10時点 楽天市場調べ-詳細)

• Kindle
• Amazon
• 楽天市場

TypeScriptの基礎から高度な使い方までを網羅した包括的な入門書です。JavaScriptの基本も含め、丁寧な解説と豊富な例で理解を深められます。初心者から中級者まで幅広い読者層に対応していますが、一部の読者には内容が冗長に感じられる可能性があります。TypeScriptを体系的に学びたい人や、より深い理解を求める開発者におすすめの一冊です。

実践力を磨く：模写からオリジナル作品制作まで

実践力を鍛えるには模写がおすすめ

独学でもスクールでも基礎知識のインプットが一通りできたら、あとは実践あるのみ。その実践として課題をやっていくこともよいのですが、世の中にあるWebサイトを模写するのがオススメです。

ここでいう模写というのは、Photoshopで既存のWebサイトを再現し、そのPhotoshopのデータからHTML・CSS・JavaScriptを使ってブラウザで再現していくことを指しています。

模写は単なる再現ではなく、プロのデザイナーがどのようにしてその色やデザイン、レイアウトにしたのか理由を考えながら進めていくとオリジナルの作品を作るときにも参考しやすくなります。

最初は画像になっているものが多い簡単なランディングページから始め、徐々により複雑なWebサイトへと挑戦していくことをおすすめします。例えば、動的なコンテンツや複数のページ構成を持つサイト、ECサイトなどがよい練習になるでしょう。

これらの模写を通じて、デザインの細部や実装の技術的な側面にも注目し、自分のスキルを磨いていくことができます。

デザインよりコーディングに特化した練習が必要と感じている方は、次の記事がおすすめです。

あわせて読みたい

無料で練習できるHTML・CSSのコーディング課題6サイト HTMLで新しいタグを覚えたり、CSSの新しいプロパティを勉強すると、早速使ってみたくなります。しかし、初心者の方だと次のような壁にぶつかってしまうこともあります。…

オリジナルプロジェクトのアイデア出し

模写も何度かやってくると、どのような手順でデザインを作成しコーディングすればよいのか分かってきます。そうなってきたら、いよいよ自分のオリジナルプロジェクトの制作に取りかかっていきましょう。

転職が前提となっている場合はポートフォリオを作ることも正解の一つですが、親戚が経営しているお店のWebページ、趣味に関連したコミュニティのプラットフォームなどもよいですし、目的がはっきりしているプロジェクトを作成するのが良いでしょう。

フィードバックをもらおう

Webデザインの上達のコツは制作物に対して、どこが良かったのかどこが及第点なのかを的確に教えてくれる人を身近に持つことです。もちろん鵜呑みにするのではなく、自分の意見と照らし合わせた上でそのフィードバックを採用するのかは考えましょう。

フィードバックをしてもらう場合は、「どうでしょうか？」といった質問よりも具体的に聞いたほうが意図に合ったフィードバックをもらえます。

ポートフォリオ作成：就職・転職に効く作品の選び方

ポートフォリオに含めるべき5つの要素

ポートフォリオとは転職や営業用にこれまで制作した作品を集めたカタログです。転職の場合には履歴書・職務経歴書・ポートフォリオの3つを求められることが多く、いざ必要になってから作るとそれなりに時間がかかってしまうので、就職活動を始めると決めたころから事前に作っておきます。

ポートフォリオには最低でも次の要素が必要とされています。

プロジェクトの説明の効果的な書き方

プロジェクトの詳細な説明には次のような内容を書きます。未経験の場合だと役割はデザインとコーディングの両方となる場合がありますが、経験者の場合だとコーディングしか担当していなかったのにデザインもしたと誤解を生んでしまうことがあるので、役割はしっかりと書きましょう。

• クライアントや課題の背景
• プロジェクトの目的
• あなたの役割、規模
• 直面した課題とその解決方法
• プロジェクトの成果や影響

クライアントワーク vs 個人プロジェクト：バランスの取り方

ポートフォリオには、クライアントの仕事と個人プロジェクトの両方を載せるのが大切です。クライアントの仕事は実務経験を示せ、個人プロジェクトは自由な発想を見せられます。

両方の作品を入れることで、幅広い能力と柔軟性をアピールできます。

同じクライアントの仕事ばかりだったり、会社に所属していた場合、似たようなデザインばかりになることがあります。そうなると、様々なデザインスキルを見せるのが難しくなります。そんな時は、個人プロジェクトを通じて多様なデザイン力をアピールするのが効果的です。

ポートフォリオサイトの作り方：テンプレート活用とオリジナル制作

ポートフォリオはWebデザイナーのスキルや創造性を直接的にPRできる重要なツールです。ここでは、テンプレートから作成する方法とオリジナルで制作するポイント、そして効果的なサイト構築に必要な要素について詳しく解説します。

テンプレート作成とオリジナルで作成するのとどちらがいいの？

どちらも一長一短ありますが、選択の基準としては次のように考えます。

• 経験レベル：初心者はテンプレートから始めるのが良い
• 時間的制約：短期間での公開が必要な場合はテンプレートが有利
• プロジェクトの性質：高度なカスタマイズが必要な場合はオリジナル制作

テンプレートを活用する場合のWebサイト作成ツール

1. BRIK PORTFOLIO（無料）
   • 特長：転職メディアBRIKが運営するポートフォリオ作成ツール。パスワード保護付きで公開可能。
2. STUDIO（無料プランあり）
   • 特長：コーディング不要で細部までこだわったデザインが作成可能。パスワード保護による公開は有料プラン。
3. Wix（無料プランあり）
   • 特長：世界的に人気のWebサイト制作ツール。コーディング不要でテンプレートからポートフォリオを作成可能。900種類以上の豊富なテンプレートから選択できる。

Webデザイナーとしてのキャリアパス

未経験からWebデザイナーへ：転職成功のポイント

Webデザイナーへの転職は、適切な準備と戦略があれば十分に実現可能です。以下、重要なポイントを詳しく解説します。

Webデザイン業界研究の方法

未経験からWebデザイン業界に転職を考えている場合、業界研究は不可欠です。
以下の方法で、Webデザイン業界への理解を深めましょう。

• オンラインリソースの活用する
  • デザイン関連のブログやニュースサイトの定期購読
  • 例：『コリス』『Webクリエイターボックス』『Web Designing』
• 業界イベントやセミナーへの参加する
  • デザインカンファレンスやミートアップへの出席
  • 例：『CSS Nite』『デザインフェスタ』
• 現役デザイナーと交流する
  • XやInstagramを活用した交流
  • 業界イベントやセミナーでの懇親会などでの交流
• 企業研究をする
  • 求人サイトでの情報収集
  • 企業のWebサイトやSNSアカウントのチェック
• トレンド分析をする
  • 最新のデザイントレンドや技術動向の把握
  • 例：レスポンシブデザイン、モーショングラフィックス、AI活用デザイン

このような業界研究は、面接の際に話をすることで自己PRにもなります。

効果的な自己PR方法

未経験の場合では自己PRが特に重要です。以下のポイントを押さえましょう。

1. 強みを明確にする
   • 前職での経験をWebデザインにどう活かせるかを具体的に説明します。
   • 例：「営業経験を活かし、クライアントのニーズを的確に把握し、デザインに反映できます」
2. 学習意欲のアピールする
   • 独学での取り組みや受講したコースについて言及します。
   • 例：「毎日2時間、オンラインコースでUIデザインを学習し、3ヶ月で5つのサイトを完成させました」
3. 成果物の提示する
   • ポートフォリオを通じて、スキルの成長過程を可視化します。
   • 個人プロジェクトや模写作品を効果的に紹介します。
4. 志望動機の明確にする
   • なぜWebデザインに興味を持ったのか、具体的なエピソードを交えて説明
   • 例：「前職で使いにくいシステムに悩まされた経験から、ユーザー視点のデザインの重要性に気づき、Webデザイナーを志望しました」
5. コミュニケーション能力のアピールする
   • チームでの協働経験や、クライアントとのやり取りの模擬例を提示する

ポートフォリオのレビューの受け方

ポートフォリオは、あなたのスキルと可能性を直接示す重要なツールです。
ポートフォリオを作成したら、他の人にレビューをしてもらいクオリティを高めていきましょう。

1. レビュー前の準備
   • ポートフォリオの構成を整理（プロジェクト概要、使用技術、制作過程、成果）
   • 各作品についての説明を簡潔に準備
2. 建設的なフィードバックの受け止め方
   • 批評を個人攻撃と捉えず、改善の機会として認識する
   • 具体的な質問をし、詳細なアドバイスを求める
3. フィードバックの記録と分析
   • レビュー中のメモ取り
   • レビュー後の振り返りと改善点のリストアップ
4. フォローアップ
   • 改善後の作品を再度レビューしてもらう機会を設ける
   • 継続的な関係性の構築を心がけましょう
5. 多様な視点の獲得するために
   • 複数の現役デザイナーからレビューを受ける
   • オンラインコミュニティでのフィードバック活用

経験からWebデザイナーへの転職は、綿密な準備と継続的な努力が必要です。
業界への深い理解、効果的な自己PR、そして質の高いポートフォリオの作成が、転職成功の鍵となります。これらのポイントを押さえ、着実にステップを踏んでいけば、道は開けるはずです。

フリーランスWebデザイナーとして独立する方法

フリーランスのWebデザイナーとして活躍するには、デザインスキルだけではなく、ビジネススキルも必要となります。以下必要なポイントを詳しく解説します。

必要なビジネススキル

• 時間管理スキル
  • タスク管理ツールの活用し、指定された期日までに正しくプロジェクトを完遂させる能力が必要となります
  • ポモドーロテクニックなどの時間管理手法の実践し、適宜休憩を取るなどの工夫をしていくことが長続きします
• 財務管理スキル
  • 収支の管理や税金などの基本的な会計知識が必要となります
  • たいていのことは会計ソフトの使用するとクリアできますが、知っておくことに損はありません
• コミュニケーション能力
  • クライアントとの効果的な対話する力が必要です
  • プロジェクト提案書や報告書の作成スキルなどもコミュニケーション能力とされています
• 契約管理
  • 基本的な契約書の理解しておきましょう。内容は難しく感じるかもしれませんが、自身を守るためでもあるので抵抗なく読む癖を付けておくと良いです。
  • 知的財産権は知っておくと自分を守るものにもなります
• マーケティング
  • 自己ブランディング
  • SNSやポートフォリオサイトの活用

クライアントの獲得方法

フリーランスのWebデザイナーとして独立した場合は、仕事を自分で獲得し、納品する必要があります。中でも最初の案件獲得はとても難しいものになるでしょう。ここでは、具体的にどのようにしたら案件をえやすいのかポイントを紹介します。

• オンラインでの露出度を上げる
  • 専門性を示すブログの運営する
  • ポートフォリオサイトを作成しメンテナンスする
  • Facebook、Wantedlyでのプロフィールを作成する
• ネットワーキング
  • デザイン関連のミートアップやイベントへの参加する
  • コワーキングスペースの利用する
• 紹介マーケティング
  • 既存クライアントからの紹介していただく
  • 協業可能な他業種フリーランサーとの連携する
• クラウドソーシングサイトの活用
  • ランサーズ、クラウドワークスなどへの登録する
  • 初期評価を上げるための戦略的な案件の選択をする
• ターゲット市場の絞り込み
  • 特定の業界や企業規模にフォーカスする
  • ニッチ市場でのエキスパートになる

価格設定と契約の基本

フリーランスとなりクライアント獲得した後で難しいと思われるのは、見積もりだと思います。高すぎたら白紙になってしまうかもしれない、安すぎたら生活に響くといったようにジレンマを抱えています。

ここでは価格設定する上で参考になりそうなことをピックアップしてお伝えしています。

• 価格設定の方法
  • 時給制 vs 成果物単位
  • 市場相場の調査
  • 経験とスキルに応じた段階的な価格設定
• 見積もり作成のコツ
  • プロジェクトの詳細な分析
  • バッファの確保（予期せぬ変更や修正に備えるため）
  • 明確な作業範囲の定義
• 契約書の重要ポイント
  • 作業範囲の明確化
  • 支払い条件（前払い、分割払いなど）
  • 著作権や使用権の取り決め
  • 秘密保持条項
• 支払いトラブルの防止
  • 契約金や中間金の設定
• 継続的な価値提供
  • アフターサポートの提案
  • 定期的なサイト改善プランの提示

スキルアップの継続：最新技術とトレンドのキャッチアップ方法

Webデザイン業界は毎日進化しています。そのため、継続的なスキルアップが必要です。以下Webデザイナーが行っている効率的なキャッチアップアップ方法を解説します。

ブログやニュースサイトを活用する

手っ取り早いキャッチアップ方法は、ブログやニュースサイトをチェックする方法です。本よりは体系立った情報はありませんが、新しい情報を得られるので中級者以上だと重宝しています。

コミュニティへ参加する

コミュニティに参加することは、Webデザインの最新トレンドや技術をキャッチアップする効果的な方法です。オンラインフォーラムやSNSグループ、地域のオフラインイベントなどを通じて、他のデザイナーと交流し、情報交換することができます。

スキルアップは終わりのない旅です。これはWebデザイナーという職業だけでの話ではないのですが、好奇心を常に持ち続け、新しいことにチャレンジする姿勢を保つことが長期的な活躍につながります。

6. Webデザイン独学者のためのQ&A

独学でつまずきやすいポイントとその解決方法

Webデザインを独学で学ぶ過程では、様々な課題に直面することがあります。ここでは、特に頻繁に遭遇する問題とその効果的な解決方法を詳しく解説します。

コーディングのエラーの効率的な解消方法

コーディングを一生懸命してみたものの、ファイルを保存していざブラウザに表示！･･･と重い気や、ブラウザに表示されずに「おや？」と思うことが何度もあります。そんなときには次のようにエラーを解決していきます。

まずはエラーメッセージを正確に把握しましょう。エラーメッセージは英語ですが、翻訳ソフトに頼ったり、そのまま検索エンジンやGPTなどの生成AIに聞いて、エラーメッセージの内容を正確に把握します。その上で、問題箇所を特定していきます。

その上でデバッグ技術を磨いていきます。console.log()を使って変数の値がどのように変化しているのか、ソースコードの1処理を丁寧に見て変数が意図しないところで変わっていないのかをチェックしていきます。

ブラウザの開発ツールにはブレークポイントなどのデバッグツールもあるので、コードの実行を比較的簡単に見ていくとエラーが出ても冷静に対応ができると思います。

問題が特定できたら、その箇所を修正していきます。エラーを起こしていた原因が複雑だった場合は段階的にテストしていくと問題の切り分けがしやすく、早くなります。

デザイン感覚を磨くための実践的アドバイス

デザインは基礎知識を覚えただけでは上達しません。デザイン感覚を磨くにはデザインを分析したり、模写をしたりとデザインと向き合う習慣を付けることが必要です。

1. 優れたデザインを分析する
   デザイン賞をとった受賞サイトや、有名ブランドのWebサイトを定期的に観察します。なぜそのデザインが効果的なのか、ヘッダーやトップページのメインビジュアル、、、のように要素毎に分析して記録します。
2. デザイン原則の深い理解をする
   デザインの基礎知識が実際のWebサイトでどのように当てはめられているのかを観察をし、デザイン原則の理解を深めます。
3. 定期的に模写練習をする
   週に1回、分析したサイトの中から1つWebサイトを模写してみましょう。実際に模写をしてみて、模写をし終わったら「自分だったらこうしたほうが美しい」と思ったり「使いやすい」といった改善点があったら、模写したデザインから改変を加えて実際に改善してみます。

Webデザインの停滞期を乗り越えるには？

Webデザインは未経験の場合、3ヶ月以上はかかると言われているので長期戦となることがほとんどです。特に「練習あるのみ」みたいにアウトプットすることだけに時間を使ってしまうと飽きてしまうこともあります。そのために、Webデザインを飽きないようにしていることを紹介します。

1. 小さな目標を設定する
   大きな目標を小さい達成可能なタスクに分割していきます。毎日学習時間が取れるのであれば毎日の目標を大きな目標からブレークダウンして決めていくと効果的です。週末しか学習時間が取れない場合は週ごとの目標が決まると自然とやる気が出てくるはずです。
2. 学習方法や環境を変更する
   飽きないように学習方法を少しずつ変えていくのも手です。例えば午前中を動画を中心とした勉強をしていたら、午後は本を使った勉強するようにして環境そのものを変えてみます。また場所も自宅だったり、たまにはカフェなどで作業すると気分転換になるのでおすすめです。
3. モチベーションを維持するテクニック
   学習状況を可視化できると、「私ここまで勉強したんだ！」といった小さな達成感を味わうことができます。例えばスタディプラスでは、参考書を何時間使ったのかをグラフにして表示できるのでおすすめです。 他にも、Xなどで同じような境遇の方がいらっしゃるので、お互いに刺激しあう関係を築くのもモチベーションの維持に繋がっていきます。
4. 休息と振り返る
   休息は適宜とり、燃え尽き症候群を防ぎましょう。最低でも3ヶ月以上も続くことなので、定期的な息継ぎは必要です。またこういう息継ぎのタイミングで学習の進捗を振り返り、自分の成長を実感してみるとモチベーションが保てるようになります。

これらの方法を組み合わせることで、独学でのWebデザイン学習における多くの課題を効果的に克服できます。重要なのは、自分に合った学習スタイルを見つけ、継続的に改善していく姿勢を持つことです。つまずきは学習プロセスの自然な一部であり、それを乗り越えることで真の成長が得られることを忘れないでください。

モチベーション維持のコツ：長期的な学習を続けるために

「小さな成功」を積み重ねよう

Webデザインの勉強は最低でも3ヶ月以上はかかるため、目標を達成するには小さな積み重ねが重要です。小さな成功から継続的に達成感を得ながら進めると、モチベーションを維持したまま学習ができると思います。

「小さな成功」を積み重ねる方法は色々あります。例えば、「Webサイトのトップページのデザインを作る」といった場合は、「ヘッダー」「メインビジュアル」「フッター」といったようにパーツで分けて目標にしてみると、難しいと思っているデザインも少しシンプルに見えてきます。

こういった目標は達成したら記録しておきましょう。学習管理アプリやカレンダーを使って、毎日の学習時間や完了したタスクを可視化しておきます。そしてこれを月に1度、これまでに作成したデザインやHTMLをリストアップし、自分がどれだけ成長したのかを確認するとモチベーションを維持しやすいです。

Webデザイン学習を一緒に勉強する仲間を見つけよう

Webデザインを独学していく際は、同じ目標を持つ仲間と共に勉強していくのは非常に効果的です。次のような方法で学習仲間を見つけることができます。

• X： #未経験からWebデザイナー、#Webデザイン勉強中などのハッシュタグで検索をして、同じ境遇の人を見つけられます
• Qiita：技術系の記事共有のプラットフォームです。技術的なトピックが多く、Webデザインに関しての記事は少ないのですが、Webデザインを分かりやすく説明されています。コメント機能を通じて交流を始めることができます。
• note：クリエイター向けのプラットフォームで、Webデザインに関する記事も多数あります。同じ興味を持つユーザーとつながりやすい環境です。
• connpass・Doorkeeper： 勉強会開催情報をまとめている情報サイトで、Webデザインに関しての勉強会を探すことができます。初心者向けの勉強会も多くあります。
• もくもく会：各自が自分の作業を進めながら、適宜情報交換を行うイベントです。Webデザインに特化したもくもく会も増えています。
• TechAcademy・Samurai Engineer：Slackなどを通じて受講生同士が交流できる環境があります。
• Wantedly：求人サイトですが、企業主催のイベント情報も掲載されています。参加することで、同じ志を持つ人々と出会える機会があります。

学習仲間を見つける際は、自分の学習スタイルや目標に合う人を探すことが大切です。また、積極的に自分から交流を持ちかけることで、より多くの機会を得ることができるでしょう。

成功する独学Webデザイナーの5つの習慣

日々のスキル向上に取り組もう

Webデザインを独学で勉強するには、毎日書かさず勉強を続けることが大事です。1日学習を逃してしまうと、どこまでやったのかわからなくなるため思い出すのに時間がかかってしまいます。そのようにならないために、たとえ5分しか時間を取れなくても勉強することが大事だと思います。

毎日コーディングする

毎日コーディングを行うことで、コーディングスキルを着実に向上させられます。

デザインインスピレーションを収集する

常に新しいデザインに触れることで、自分のクリエイティビティを刺激してスキルを向上することができます。

技術ブログを書く

学んだことを言語化し他の人と共有することで、自身の理解を深めると同時に、業界での存在感を高めることができます。

ブログの自分で1から構築しようとしてもそれはそれで時間やお金がかかるので、技術ブログのプラットフォームを活用していくのがおすすめです。

これらの習慣を日々の生活に取り入れることで、Webデザイナーとしてのスキルを着実に向上させることができます。重要なのは、無理のない範囲で継続すること。小さな努力の積み重ねが、長期的には大きな成果となって現れます。

フィードバックの重要性：批評を受け入れ、成長する姿勢

Webデザイナーとして成長するためには、自分の作品に対する他者の意見を積極的に求め、それを適切に活用することが重要です。以下、フィードバックを効果的に活用する方法を詳しく解説します。

批評の受け方

最初に覚えてもらいたいことは批評はあなたへの個人を攻撃をしていることではないことです。誰かが作品にコメントをしてくれるということは、あなたの成長を願ってくれていることです。

私も初めてクライアントからフィードバックをもらったときに「全部やり直し？」とパニクになってしまいました。でも、落ち着いてフィードバックされた内容を見直してみると、数カ所を修正するだけで済むお話でした。

ポイントは感情的にならず、深呼吸をして客観的に受け取る姿勢を持つことが大事です。

またフォードバックの意図がわからない場合は、遠慮なく詳細を聞きましょう。何をすべきかお互いの認識が合っていないと、作る必要のないものまで作ってしまいます。可能であれば、フィードバックの背景になっている目的や懸念を聞き出して理解してみましょう。

フィードバックを作成に反映させる方法

フィードバックの内容を理解できたら、次はそれを反映させます。たくさんのフィードバックをもらった場合、出てきた順にフォードバック反映していくと全体のバランスが崩れることもありうるので、フィードバック内容を量によって分けていきます。

分類した上で、優先度の高いものから取り組んでいきましょう。1つのフィードバックに対して、複数の解決策を考えてみるのも意外と楽しいものです。

そしてフィードバックに対してデザインに手を加えたら、その変更によって新しい問題が生まれていないかも確認しましょう。デザインの難しいところなのですが、フィードバックされた部分だけを編集すると、全体から見たときにバランスが崩れてしまっていることがあります。

継続的に学習を進める：最新トレンドと技術のキャッチアップ

Webデザイン業界は急速に進化しており、最新のトレンドと技術に遅れを取らないことが重要です。以下に、効果的な継続学習の方法を詳しく解説します。

オンライン学習プラットフォームの定期的な利用

オンライン学習プラットフォームは、最新の技術やデザイントレンドを学ぶ上で非常に効果的です。

業界ニュースや専門書の定期購読

最新のトレンドや業界の動向を把握するために、ニュースサイトや専門書を定期的にチェックすることが重要です。

1. おすすめのニュースサイト：
   • コリス
   • Goodpatchブログ
   • LIG Blog
2. 専門書の選び方：
   • 著者の実績や評判を確認する
   • 出版日を確認し、最新の情報を含む書籍を選ぶ
   • 読者レビューを参考にする
3. 効果的な情報収集方法：
   • RSS リーダーを使用して複数のサイトの更新を一元管理する
   • 毎日15-30分の「ニュースタイム」を日課にする
   • 重要な情報はノートにまとめ、後で参照できるようにする
4. メリット：
   • 業界の最新動向を常に把握できる
   • 多様な視点や意見に触れられる
   • 長期的なトレンドを理解できる

継続的な学習を通じて、Webデザイナーは常に最先端のスキルと知識を維持することができます。これにより、競争力を保ち、クライアントにより高い価値を提供することが可能になります。重要なのは、これらの学習方法を日常的な習慣として組み込み、長期的な視点で自己成長を図ることです。

定期的な「作品の棚卸し」を行おう

ポートフォリオは生き物です。成長し、変化し続ける必要があります。以下のステップを3ヶ月に1回程度行うことをおすすめします。

各プロジェクトに「ストーリー」を持たせよう

単に完成品を並べるだけでは、あなたの真の能力は伝わりません。各プロジェクトに魂を吹き込みましょう。

• 背景説明：クライアントの課題や、なぜそのデザインが必要だったのかを簡潔に説明します。
• プロセスの共有：どのようにして最終的なデザインに辿り着いたのか、途中のスケッチや没案も含めて紹介します。
• 結果と学び：プロジェクトの成果（例：コンバージョン率の向上）と、あなたが学んだことを記載します。

多様性を持たせ、実験精神を示そう

クライアントワークだけでなく、個人プロジェクトや実験的な作品も積極的に取り入れましょう。これらは自身の創造性と学習意欲を示す絶好の機会です。

• 個人プロジェクト：趣味や関心事を題材にしたウェブサイトやアプリのデザイン
• 実験的作品：最新のWeb技術（例：Web AR）を使用したプロトタイプ
• リデザインプロジェクト：有名サイトやアプリの改善案

ポートフォリオの更新は、単なる作品の追加以上の意味があります。それは、あなた自身のスキルと市場価値を再評価し、向上させる機会なのです。これら3つの秘訣を実践することで、ポートフォリオは常に新鮮で魅力的なものになるでしょう。

定期的な更新を習慣化し、常に最高の自分を表現できるポートフォリオを目指しましょう。そうすることで、新たな機会や挑戦的なプロジェクトがあなたのもとに集まってくるはずです。

4つのネットワーキング戦略：思わぬチャンスを掴むコツ

Webデザイナーとして活躍するには、スキルアップだけでなく、業界内での人脈づくりも重要です。でも、「ネットワーキング」と聞くと、ちょっと身構えてしまいまがちです。そこで自然体で取り組めるネットワーキング戦略をご紹介します。

デザインカンファレンスに参加しよう

日本には、「デザインフェスタ」や「DIST（Design Inn Sawtooth）」など、素晴らしいデザインイベントがたくさんあります。これらのイベントは、最新トレンドを学べるだけでなく、業界のプロフェッショナルと出会える貴重な機会です。

実践のコツ

• 事前準備：参加者リストやセッション内容をチェック。気になる人や企業をメモしておきましょう。
• 名刺交換の際のひと工夫：自作のユニークな名刺や、小さなポートフォリオカードを用意すると印象に残りやすいです。
• 懇親会にも参加：日本では、イベント後の懇親会が重要。ここでより深い人間関係を築けます。

思わぬチャンスの例

「デザインフェスタで出会った広告代理店のクリエイティブディレクターから、半年後に大型プロジェクトの仕事をいただきました。カジュアルな会話から始まった関係が、大きなチャンスにつながったんです。」

オープンソースプロジェクトに貢献しよう

GitHubなどで公開されているオープンソースプロジェクトへの貢献は、グローバルなコミュニティとつながる絶好の機会です。日本発のプロジェクトも増えているので、言語の壁を感じずに参加できるものも多いです。

貢献の方法：

• UIの改善提案：日本語ユーザーの視点からの使いやすさ向上を提案する
• ドキュメントの日本語化：英語のドキュメントを日本語に翻訳する
• アクセシビリティの向上：日本の基準に合わせた改善を提案する

思わぬチャンスの例：

「あるCSSフレームワークの日本語ドキュメントを作成したところ、プロジェクトのコアメンバーから声をかけていただき、日本語コミュニティのリーダーを任されました。これがきっかけで、技術書の執筆依頼まで来たんです！」

note、Zenn、Qiitaを活用しよう

noteやZenn、Qiitaなどのプラットフォームが活発です。これらを上手く活用することで、日本のデザインコミュニティでの存在感を高められます。

効果的な活用方法：

• 定期的な投稿：週1回程度、デザインのTipsや制作事例を共有する
• 他の投稿へのコメント：建設的なフィードバックを心がける
• 有料記事の活用：noteの有料記事機能を使って、より深い知見を共有する

思わぬチャンスの例：

「Zennで公開したデザインシステムの記事がバズって、大手IT企業のデザイン部門の方から連絡をいただきました。結果、その企業の新規プロジェクトのコンサルティング契約につながったんです。」

地域のデザインコミュニティに参加しよう

オンラインも大切ですが、地域に根ざしたコミュニティ活動も忘れずに。各地域には「デザイナーズカフェ」や「UXミルク」のような勉強会があります。

参加方法：

• connpass、Doorkeeperでローカルなデザインイベントをチェックする
• コワーキングスペースのデザイナー向けイベントに参加する
• 地元の商工会議所のデジタル化セミナーなどにも顔を出してみる

思わぬチャンスの例：

「地元の勉強会で知り合った中小企業の社長さんから、『うちのWebサイトをリニューアルしてほしい』と声をかけていただきました。これをきっかけに、地域密着型のWeb制作の仕事が増えていきました。」

ネットワーキングは、決して無理をして行う必要はありません。自然体で、自分の興味や得意分野を活かしながら少しずつ始めてみましょう。デザインコミュニティは、意外とあたたかく、新しい仲間を歓迎してくれるものです。

WordPressで直接HTMLを挿入するブロックを作りたいと思って、「カスタムHTML」のブロックを探してみたものの、表示されていなくて焦りました。原因はとある設定で非表示になっているだけでした。

今日はWordPressのブロックエディタでカスタムHTMLが表示されない場合の解決方法を紹介します。

カスタムHTMLがブロックエディタから表示されない問題

投稿編集画面でブロックを追加しようとしたところ、カスタムHTMLのオプションが見当たりませんでした。通常であれば、ブロックの一覧や検索結果に表示されるはずのこの機能が、どこを探しても見つかりません。

ブロックの検索欄に「カスタム」と入力しても、期待される「カスタムHTML」の選択肢が現れず、困惑してしまいました。

カスタムHTMLは、一見すると頻繁に使用するものではないかもしれません。しかし、その重要性は見逃せません。
例えば、記事内の特定の箇所にバナー広告を挿入したい場合や、Xの投稿をblockquote形式で効果的に埋め込みたい場合など、柔軟な表現を可能にする強力なツールです。さらに、独自のスタイルを適用したり、複雑なレイアウトを実現したりする際にも、カスタムHTMLは欠かせません。

このブロックが利用できないということは、単に一つの機能が使えないというだけでなく、ウェブサイトのデザインや機能性に大きな制約をもたらします。記事の見栄えを向上させたり、ユーザーエンゲージメントを高めるための創造的なアイデアを実現したりすることが難しくなってしまいます。

結果として、サイトの表現力が制限され、読者に提供できる体験の質が低下してしまう可能性があります。

 投稿画面の表示設定で解決

この問題を解決するには、投稿画面の表示設定を適切に変更することで、カスタムHTMLブロックを再び利用可能にすることができます。この簡単な設定変更により、WordPressの編集機能をフルに活用できるようになります。

以下に、具体的な手順を詳しく説明します。これらのステップを順番に実行することで、カスタムHTMLブロックを再び表示させ、使用できるようになります。

1.　WordPressの管理画面にログインし、任意の投稿画面を開きます。これは新規投稿の作成画面でも、既存の投稿の編集画面でも構いません。

2. 画面の左上隅に位置する［･･･（縦の三点リーダー）］→［設定］オプションをクリックします。これにより、投稿画面の設定パネルが開きます。

3. 設定パネル内で［ブロック］セクションを探します。このセクションには、様々なブロックタイプの表示/非表示を制御するオプションが含まれています。

4. ［ブロック］セクション内で［カスタムHTML］という項目を見つけます。この項目の横にあるチェックボックスをクリックして、状態を反転させます。チェックが入っていなかった場合はチェックを入れ、入っていた場合は外します。

5. 設定の変更が完了したら、設定パネルの右上隅にある［X］アイコンをクリックして、パネルを閉じます。

これで設定の変更は完了です。

6. 変更が正しく適用されたかを確認するために、投稿画面の左上にある［＋］アイコンをクリックします。

7. 開いたブロック選択メニューの検索欄に「カスタム」と入力します。正しく設定が変更されていれば、検索結果に［カスタムHTML］というオプションが表示されるはずです。

以上の手順を実行することで、カスタムHTMLブロックが再び利用可能になり、より柔軟な投稿編集が可能になります。この設定変更は一度行えば永続的に適用されるため、今後同じ問題に悩まされることはなくなります。

カスタムHTMLの使い方

カスタムHTMLブロックは、WordPressの標準ブロックでは難しい複雑なレイアウトや機能の実装に非常に便利です。特定スタイルのボックス作成や、JavaScriptを用いた動的コンテンツの挿入に活用できます。さらに、外部サービスの埋め込みコードを直接貼り付けることも可能です。

まとめ

以上、WordPressでカスタムHTMLが表示されない問題とその解決方法について解説しました。この問題の主な原因は、WordPressのデフォルト設定にあります。多くの場合、カスタムHTMLブロックは初期状態で非表示に設定されているため、ユーザーが手動で表示設定を変更する必要があります。

投稿画面の表示設定を見直し、カスタムHTMLブロックを有効にすることで、簡単に解決できます。一度設定を変更すれば、以降は問題なくカスタムHTMLブロックを使用できるようになります。

カスタムHTMLは、高度なウェブデザインや機能実装に欠かせないツールです。この設定変更により、WordPressの編集機能をより柔軟に活用し、魅力的なコンテンツを作成することができます。困ったときは設定を見直す習慣をつけることで、WordPressの隠れた機能を最大限に活用できるでしょう。

Webデザイナーは転職時のポートフォリオ、ブログ、クライアントワークをレンタルサーバーを使って公開することが多いです。でも「レンタルサーバーはたくさんあって、結局どれがいいのかわからない」といったことがあったり、初めて聞くような難しい用語も多く、高いサーバーを契約してしまって、使いもしないのに無駄に1年分の利用料金を払ってしまったということもあります。

今回は未経験のWebデザイナーの方でも安心して契約できるように、レンタルサーバーを紹介し、各サービスの特徴、レンタルサーバーの選び方を紹介していきます。

レンタルサーバーのおすすめは用途による

レンタルサーバーは用途によっておすすめが違います。
用途を限定すると、高いスペックのサーバーは最初は無駄になりやすく、かといって無料のサーバーだとページスピードが安定しなかったり、広告が入ってしまうのであまりオススメできません。

今回は、WordPressを使う際に十分に運用に耐えられるスペックのレンタルサーバーを選びました。

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

レンタルサーバーの価格の相場はだいたい月額200〜1000円程度が相場です。
もっと高いサーバーもあり、その分スペックが高いものもありますが、はじめのうちから高いサーバーを選択しても使い切れない可能性が高いので、安価なサーバーから始めるのがオススメです。

ポートフォリオだけを作るなら「ロリポップ」

＼ 公式サイトはこちらから／

ロリポップ！

転職用にポートフォリオのみを作るだけならロリポップで十分です。転職活動の準備期間も考えると半年から1年ぐらい契約しておくとよいと思います。

WordPressでポートフォリオを作るとしたら、ディスク容量はWordPress本体とデザインテーマ、自分の作品数点とその作品に対しての説明ぐらいなので、300MBぐらいあれば十分です。

WordPressが使えて一番価格が低いプランは「ライトプラン」です。ライトプランであれば、WordPressを簡単インストール機能が使えてポートフォリオの構築が一瞬で終わります。

＼ 公式サイトはこちらから／

ロリポップ！

ロリポップは契約期間を短くしたり長くしたりできるので、転職活動期間が終わったら一度アカウントを削除して次回の転職のときにまた契約してWordPressを構築といった形で必要に応じて環境を用意できるというのもお財布に優しい設計になっています。

ただし、ロリポップのライトプランではデータベースを1つしか作れないので、複数のWordPressを作ろうとすると、手動で設定する部分が出てくるので少し面倒になる点は気をつけてください。

＼ 公式サイトはこちらから／

ロリポップ！

ポートフォリオもブログも作るなら「エックスサーバー」

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

転職活動用のポートフォリオに加えて、WordPressでブログも作ってみたいというように、複数のWordPressを動かす場合にはエックスサーバーがおすすめです。

私の場合は積極的にブログを書くことで、情報発信をしていることが評価されて登壇経験ができたり、お仕事をいただけたり、同業の友人が増えたり、今の会社に就職することができたりと良いことづくしでした。

エックスサーバーは国内のレンタルサーバーでシェアがNo.1なので、困ったことがあっても検索すれば結構簡単に答えを見つけられます。かといってサポートが貧弱かというとそうでもなく、電話・メール・チャットと3パターン用意しています。

そして私がエックスサーバーを使う決め手になったのが、ドメイン単位で環境設定できる点です。
お試しでWordPressの実験環境を作るときに、PHPのバージョンをドメイン単位で選べるので万が一バージョンを変更して既存のWordPressが動かなくなったとしても、その影響はそのドメインに閉じることになるので、影響範囲を最小限に抑えてくれます。これで検証がしやすくなります。

またエックスサーバーではWordPressの高速化で有名なKUSANAGIを導入してWordPressに特化したサーバー構成になっています。これが効いているのか、当ブログでも1秒も待たずにレスポンスが返ってくることがほとんどです。よほどのことがない限り、サーバーが重たくなるといったこともないと思われます。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

価格重視でブログだけをするならConoha WING

＼ 公式サイトはこちらから／

ConoHa WING

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

クライアントワークでブログを作ることになった場合では、Conoha WINGかエックスサーバーのどちらかがおすすめです。というのも、ロリポップは銀行振込ができないのでクライアントによってはカード決済できない場合が多くて、自分で立て替えて払うことも出てきて面倒でした。

といった消去法でConoha WINGとエックスサーバーがおすすめです。どちらも銀行振込に対応しているので、クライアントが決済しやすい方法が用意されています。

スペック的にはどちらも変わらずです。自分用にエックスサーバーを利用しているのであれば、Conoha WINGを契約せずに新しいアカウントでエックスサーバーを契約したほうが、管理画面を2社分学習せずに済みます。

料金面でいうとConoha WINGが年間だとエックスサーバーに比べて3,000円程度お得です。また東証プライムに上場しているGMOインターネットグループの子会社なので、社会的な信用を大事にしているクライアントに刺さりやすかったりします。そういう意味でクライアントワークだと値段と信頼といった2面で提案しやすいサーバーです。

＼ 公式サイトはこちらから／

ConoHa WING

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

レンタルサーバー選びのポイント

レンタルサーバーを金額帯とスペックでまとめると、会社ごとの差異は誤差レベルなので気にする必要はないと思います。
なぜ3社に絞ったのかというと、以下の3つの観点で選定してみました。

ポイント1：WordPressを簡単にインストールできるか

WordPressの簡単インストール機能はマストです。簡単インストール機能がなくてもWordPressはインストールできるのですが、とても面倒です。手動インストールをするとしたら、このようなことが必要になります。

ファイルをアップロードするのも慣れてないと大変ですし、ファイル転送ソフトをインストールをPCにインストールしていないとアップしにくいので、かなり骨が折れる作業になりがちです。データベースの接続情報も管理画面を何度も見直して設定できました。

しかしWordPressの簡単インストール機能があると、レンタルサーバーの管理画面から2〜3クリックで上記の4ステップを飛ばしてすぐにWordPressのログイン画面まで辿り着けるようになります。

ポイント2：SSLは無料で使えるのか

SSLが使えるかどうかというのは、ブログやポートフォリオを公開する際のURLがhttps://で始められるかどうかを意味しています。ポートフォリオがhttp://で始まっているものだと、アドレスバーに「このサイトはSSL非対応です」と警告されてしまい、書類選考の集中力を欠いてしまいます。

ブログの場合だと、GoogleがSSL対応しているサイトを優遇すると明言しているため、検索エンジンに出にくくなるといったデメリットもあります。

一昔前だとSSLを利用するのに年間1万円〜10万円程度の料金がかかっていましたが、今ではレンタルサーバーで無料で使えるようになっているところがほとんどです。

ポイント3：管理画面はわかりやすいか

サーバーの管理画面のわかりやすさがWordPressを簡単にインストールできるかに直結するので大事な観点として選びました。実際の仕事でもレンタルサーバーを使っているのですが、何社の管理画面を触っていると、何十年前のデザインなんだと首をかしげてしまうぐらいダサいデザインの管理画面のレンタルサーバーもあります。

今回は管理画面がきちんとメンテナンスされている会社だけを選びました。

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

レンタルサーバーの基礎知識

レンタルサーバーとはサーバーの貸し出しサービス

レンタルサーバーとはサーバーの貸し出しサービスです。私たちがサーバーにファイルを置くことで、それをWebページとして発信できます。

しかしレンタルサーバーに置いたファイルは、レンタルサーバーのドメインのURLでしか表示できません。これを自分の好きなドメインで表示するには、「独自ドメイン」サービスを利用します。ドメインを取得し、レンタルサーバーのIPを登録して初めて独自ドメインのURLが使えるようになります。

レンタルサーバーは「建物」に似ていると言われています。 家を建てるには土地がないと始まらないので、まずは土地を買います。レンタルサーバーも同じようにまずは契約してサーバーを使えるようにする必要があります。

Webページの「住所」となるドメインを取得して、それを看板に掲げる登録をして初めて独自ドメインのURLでページを公開できるようになります。

「建物」であるWebページは、手動で書いたHTMLが置いてあったりWordPressのファイルが置いていたりと、運営している人の自由な設計が行えるようになっています。

サーバーの種類

レンタルサーバーといってもだいたい3種類ぐらいあります。

共用サーバー

スペックが高いコンピューターを何人かで共有して使う方式のサーバー。建物でいうとシェアハウスに近く、誰かが負荷の高い処理を動かしてしまうと、それによって他のサーバーの人のページを遅くさせてしまったりするといったこともたまに起こります。

専用サーバー

スペックが高いコンピューターを自分だけで使う方式のサーバー。建物でいうと一軒家と近く、コンピューターを自分専用に使うことができます。

そのため他の人の処理影響に左右されずに高速な処理で動かし続けられます。
値段も共用サーバーに比べると格段に上がってきます。

VPSサーバー

スペックが高いコンピューターを共用サーバーと同じように何人かで使う方式のサーバーです。建物でいうと分譲住宅に近いイメージです。ただしレンタルサーバーと違い、CPUやメモリまでユーザーに割り当てているので他の人の影響を受けにくくなっています。お値段は共有サーバーと専用サーバーの中間程度ぐらいだと思っておくとイメージがつきやすいかと思います。

このページで紹介しているレンタルサーバーは厳密には共用サーバーになります。WordPressでポートフォリオやブログを動かすのであれば、もともとPHPやMySQLが備わっている共用サーバーがやりやすいです。仮に他の種類のサーバーからブログを始めようとすると、PHPやMySQL自体のインストールから行う必要があり、初めての方だとそれだけで3ヶ月ぐらい簡単に時間が溶けると思います。

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

Webサーバーの種類

Webサーバーとはインターネットからのリクエストを受け取り、何かしらの応答を返す役割を担っている部分です。代表的なサーバーソフトウェアは3種類あります。

レンタルサーバーでも3つのうちのいずれかを使っていますが、3者で極端な優劣がつくといったものではありません。

スペックに関する用語

ディスク容量

サーバーに保存できるデータの大きさのこと。データベースの容量もこの中に含まれることがほとんどです。容量がいっぱいになると、これ以上書き込めなくなったりするので余裕をある程度持っておくと良いと思います。

データ転送量

クライアントからの要求で返すHTMLや画像などのデータ量の上限。上限を超えると転送できなくなりますが、最近のレンタルサーバーは無制限のものが増えてきたので大きく気にすることは必要ないと思います。

バックアップ

WordPressで拡張機能を更新したら、画面が真っ白になって使えなくなってしまった・・・みたいな場合にもとに戻すことができるようになる機能。バックアップ機能を利用していると、自動的に決まった時点のハードディスクの内容を保持しているので、万が一途中でサーバーが動かなくなってしまったらその時点からのファイルを復元できるようになります。

SSD

サーバーの中でデータを保存する媒体の名称。ソリッドステートディスクの略でフラッシュメモリにデータを行うストレージです。USBメモリと同じ仕組みです。従来のHDD（ハードディスクドライブ）に比べて書き込みと読み込みのスピードが早いのが特徴です。

最近のレンタルサーバーではストレージがHDDからSSDのものになってきており、このページで紹介しているレンタルサーバではすべてSSDになっているものを紹介しています。

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

まとめ

レンタルサーバーをまとめると、次のようになります。

レンタルサーバーを比較すると、サーバーのスペックも色々、金額もピンキリです。しかし、最初のブログ構築の一歩としてWordPressを使うのであれば1000円程度のものが、価格・スペック・やりたいことに対してのバランスが取れているものになっています。

目的に合わせてレンタルサーバーを上手に選んで、サーバーを大事に使っていきましょう。

レンタルサーバー比較表

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

Macのスクリーンショットを撮るためにソフトをお試しで使っては乗り換えて、使っては乗り換えてを繰り返していましたが、ここ2年ぐらいはCleanShotに落ち着きました。

「スクリーンショットを撮る」という基本的な機能はMacの標準のスクリーンショット.appと変わらないのですが、標準とは違う部分に価値を感じてしまってずっと離れられずにいます。

この記事ではCleanShotの簡単な機能紹介と、私が惚れてしまったCleanShotのここが素敵と思ったポイントを紹介していきます。

CleanShotとは気軽に使える画面キャプチャソフト

CleanShotは、Macで動作するスクリーンショットを撮影して加工し、ファイルとして書き出すアプリです。基本的な撮影に加えて、マークアップやエクスポート機能も充実しています。

また、Macのスクリーンショット.appとほとんど変わらない撮影スタイルなので、使いやすいと感じる方が多いようです。さらに、前回のエリアを記録してくれる機能があるなど、痒いところに手が届くものになっています。

基本的な撮影はスクリーンショット.appと同じ

CleanShotのスクリーンショットの撮影方法はMacのスクリーンショット.appと同じです。画面全体、選択範囲、特定のウィンドウといったスクリーンショット.appでできていた撮影方法はCleanShotでもできます。

CleanShotでしかできない機能

基本的なキャプチャはできるものの、CleanShotでしかできないような機能もいくつかあります。

直前に撮った範囲で画面キャプチャ

前の画面キャプチャと同じ範囲を撮影できます。スクリーンショット.appでもできますが、ショートカットを割り当てられなかったり、範囲外の画面が暗くなるので何度もキャプチャを撮ろうとすると目が疲れたりと使いにくいのが残念です。

CleanShotではショートカットも割り当てられ、撮影時に画面が暗くなることもないので、連続して使いやすいです。とくにウェビナーでスライドを撮影するときにはショートカットを割り当てておけば、ショートカットを押すだけで済むので手早く撮影できます。

スクロールして画面を繋げる画面キャプチャ

キャプチャしたい範囲の画面をスクロールすると、縦長の画面キャプチャを作成できます。ブラウザ以外のアプリにも対応しているので、例えばWordやExcelといったものにも使えます。

撮影後はファイルに保存せずクイックアクセスに表示

撮影したスクリーンショットはクイックアクセスというパネルに一時的に置かれ、画面の左下端に小さく表示されます。注釈を入れる場合って撮影後に早く画像を確認したいので、わざわざFinderから画像を探す必要がないので地味だけど便利です。

注釈や図形を入れるマークアップ機能も充実

仕事でマニュアルを作ったり、ブログで手順を示す画像を作ったりする場合、スクリーンショットをそのまま貼り付けず、説明のために番号を振ったり矢印を加えたりと一手間を加えることが多いと思います。

CleanShotは説明するための機能も充実していて、次のような機能があります。

• 長方形や円などの図形の挿入
• テキストの挿入
• 番号の挿入
• モザイク
• ハイライト
• マーカー

この中でもハイライトは特定の色で囲むよりも目立たせるよりも上品な感じがするのでよく使っています。

書き出しはドラッグ＆ドロップでファイル名を意識させない設計

撮影した画像や注釈を入れた画像はドラッグ＆ドロップで画像に書き出せます。Slackなどのチャットツールにもそのままファイルを渡すことができるので、いちいちファイルに書き出すような手間がなく簡単に添付できます。

CleanShotをおすすめする理由

スクリーンショットアプリは他にもありますが、あえてCleanShotをおすすめしたい理由が3つあります。

前回の撮影エリアをショートカットで記録できるから

CleanShotでは前回撮影した範囲を再度撮影できるのですが、この機能にもショートカットを割り当てできます。Macのスクリーンショット.appではできませんでした。

CleanShotは一度キャプチャをする範囲を決めてしまえば、ショートカットを押すだけでエフェクトもなくキャプチャが完了します。そしてその画像をファイルに保存せずコピーするだけにしておくと、Notionなどに簡単に貼り付けられます。

これがどのようなときに使えるかというと、ウェビナーです。画面の切り替わりが多いウェビナーだと、テレビのように数秒のうちに何回も画面が切り替わります。そんな状況でMac表樹のスクリーンショット.appでキャプチャしようと思うと、画面が暗転するまでのエフェクトを待ってるだけで終わってしまいます。

こうやってNotionにキャプチャを貼り付けて、印象に残ったセリフなどのメモしておくと、キャプチャによって前後関係がわかりやすいので「なんでこんなメモを取ったんだっけ・・・？」みたいなことがかなり減らせました。

Mac標準のスクリーンショット.appと変わらない使用感

CleanShotのデフォルトではショートカットが設定されていませんが、Mac標準のスクリーンショット.appのショートカットを無効にしてCleanShotのショートカットを設定すると、スクリーンショット.appと大きく変わらない使用感になります。

CleanShot独自の機能のショートカットは自分で割り当てて覚えておく必要がありますが、ショートカットをスクリーンショット.appに倣うように設定できるのはありがたかったです。

撮影後の注釈入れが楽＆品質もそこそこで文句なし

CleanShotは撮影後に図形や注釈を加えるのがとても簡単です。文字も袋文字になるので、スクリーンショットした画像が多少うるさくてもそこそこに目立ちます。そして使える色も制限されているので、下手に色を選ぶ時間をかけなくてもいいのは楽です。

画像を書き出すときはウィンドウの真ん中下のDrag Meをドラッグして、Slackの会話メッセージ欄にドロップするとそれがそのまま書き出されます。PhotoshopやIllsutratorでも注釈を付けて画像を書き出しできますが、ファイル名やファイル形式をダイアログで指定することなり面倒です。

CleanShotはラフに人にスクリーンショットを共有する用途にはかなり向いていると思います。

まとめ

CleanShotは購入して2年ぐらい使っていますが、今も変わらず使い続けています。記事中でも取り上げましたが、ウェビナーの画面キャプチャをNotionに貼り付けるのは簡単です。Notionに画像がアップされるまでの間にすかさずメモを取るのも少しずつうまくなってきました。

有料アプリではあるのですが、買ってよかったと思っています。

レンタルサーバーを比較していくと、ConoHa WINGかエックスサーバーのどちらにすべきかと悩むことがあります。
パッと見では大きな差がないものの、実際のところ私もレンタルサーバーを検討したときに、検討項目が多くかなり混乱してしまいました。

この記事ではConoHa WINGとエックスサーバーの2つを比較して、状況に合わせた選び方ができるようになります。サーバー選びの参考にしてください。

ConoHa WINGとエックスサーバーを比較した結論

ConoHa WINGとエックスサーバーを比較すると、大きく次のような結論になりました。スペックは大まかには一緒です。違いでいうと次のようなことが言えます。

＼ 12/5まで最大53%OFF ／

ConoHa WING 公式サイト

＼ 1/7まで最大30％OFF ／

エックスサーバー 公式サイト

ConoHa WINGとエックスサーバーの比較表

ConoHa WINGとエックスサーバーの比較を大きくまとめると下表のようになります。

比較1 ConoHa WINGとエックスサーバーの料金・特典を比較

結論：1年契約だとエックスサーバーのほうが安い
気を付けること：キャンペーン期間以降のConoHa WINGの通常価格は高いので注意

初期費用はどちらも無料

ConoHa WING・エックスサーバーのどちらも初期費用は0円です。

初回と2回目以降の月額費用の差に要注意

月額費用には2種類あります。初回契約時の月額料金と、2回目以降の月額料金です。
初回契約の場合はキャンペーンが適用されて割引されていますが、2回目以降はキャンペーン適用外となり通常料金になります。そのためトータルでいくら支払う必要があるのかを意識して料金比較することが大事です。

エックスサーバーがキャンペーン期間中でかなり安め

ConoHa WINGとエックスサーバーの月額料金を単純比較すると、エックスサーバーが月額60円程度安く、年間だと60円×12＝732円程度安くできます。

レンタルサーバーは年単位で契約することが多いので、それぞれを契約した場合の合計の支出額をグラフにしてみました。1年おきに決済することになるので、それぞれ13ヶ月目・25ヶ月目に合計額が上がっています。

どちらも2回目以降の契約からは通常料金になるので、1年契約した場合は13ヶ月目から、2年契約した場合は25ヶ月目から金額が上がっていて支払い総額ではエックスサーバーのほうがお得になっています。

とくにConoha WINGは、2回目の契約時の24ヶ月目から金額が傾きが大きく変わっており、エックスサーバーを1年契約を2回繰り返し契約した以上にコストがかかってしまいます。

比較2 ConoHa WINGとエックスサーバーのサポートを比較

結論：エックスサーバーのほうが満足度が高いが、誤差の範囲

ConoHa WING、エックスサーバーのサポート窓口への連絡手段は、メール・チャット・電話の3つの方法でお問い合わせができます。対応可能時間もどちらも同じです。

「ConoHa WING サポート」「エックスサーバー サポート」で2022年の間にTwitterに投稿された件数を比較すると、エックスサーバーのほうが圧倒的に多かったです。これは次の章で解説しますが運営期間が長いのでユーザー数が多いためです。

そしてこれらの書き込みをAIによる口コミ分析をすると、次のような感じになりました。

グラフの縦軸が感情の強さ、横軸が感情の度合いです。グラフで上にいけば行くほど、強い感情で発せられ、グラフで右に行けばいくほどポジティブな感情だった口コミになります。

エックスサーバーの方が僅かながらポジティブな反応が多く、ConoHa WINGはややネガティブな反応が多くなっているのがわかります。極端な偏りがあればどちらがいいかと言えましたが、正直なところどっちもどっちという印象です。

比較3 ConoHa WINGとエックスサーバーの運用実績・国内シェアを比較

結論：エックスサーバーが長年の運用実績からシェアNo.1

ConoHa WINGとエックスサーバーの運用実績と国内シェアを比較すると、次の表のようになりました。

ConoHa WINGとエックスサーバーの運用開始時期を比較すると、エックスサーバーが2003年からでかなり古くからサービスをしています。2023年現在で20年の運用実績を持っていることになります。

国内シェアはエックスサーバーで1位、ConoHa WINGはランキング圏外となっています。そのためエックスサーバーはトラブルの解決をしたブログ記事なども多くなっており、サポートに聞くまでもなく自分でも解決しやすくなっています。

比較4 ConoHa WINGとエックスサーバーの性能・機能を比較

結論：ConoHa WING、エックスサーバー共に大きな差はなし

サーバーソフトはnginxをどちらも使用

Webサーバーとは、URLに応じてURLを送ってきた端末にデータを送るソフトウェアのことです。ConoHa WINGとエックスサーバーの両方では、nginxをサーバーソフトとして使用しています。このため、基本機能は大きな差はありません。

nginxは高速で軽量なのが特徴で、特に高負荷なサイトなどでは採用されています。

ディスク容量はエックスサーバーが有利

ConoHa WINGとエックスサーバーのディスク容量は、ConoHa WINGが300GBに対して、エックスサーバーは500GBとなっています。ディスクはどちらもSSD。SSDとはハードディスク（HDD）と比べて高速で高い容量を持ち、かつ消費電力も少ないストレージデバイスのことです。また、振動が少なく耐久性が高いので、長期的な使用にも向いています。

300GBは容量的に多いのかというと「かなり多い」ほうです。WordPressだと1記事でテキスト原稿と1枚当たり500KBの写真を3枚使ってブログを書くと、20万記事ぐらい書ける計算です。一生分困ることはなさそうですね。もちろん300GB以上あるエックスサーバーもすでに十分の容量であるということが言えます。

転送量はどちらも無制限

転送量とはサーバーからクライアントにデータを送る際に使われるサーバー帯域のことです。ConoHa WING・エックスサーバーのどちらも容量が無制限なので、帯域制限を気にする必要はありません。

ちなみに転送量に制限がある中で大量のアクセスがあった場合、帯域が絞られてしまいページの表示が遅くなるといったこともありました。

データベースソフトは両社で違い

データベースソフトは会社によって採用するソフトが分かれました。

WordPressを使うのであれば、MySQL・Maria DBのどちらでも問題ありません。Maria DBについて補足をすると、MySQLの派生として開発されたもので、MySQLはOracle社が管理しているのに対して、MariaDBはコミュニティによって管理されています。一概に言えるわけではありませんが、MariaDBのほうがパフォーマンスは高いとされています。

無料SSLはどちらも標準装備

SSLとは、ウェブサイトのデータを暗号化して、不正なアクセスを防止する仕組みのことです。ConoHa WING、エックスサーバーとも無料でSSLを導入することができます。どちらもLet’s Encryptを利用しています。

安全なアクセス方法がHTTPSです。そのため、URLがhttpsから始まるURLはユーザーの検索体験を向上させるものとしてGoogleからも推奨されており、検索結果の順位が上下する要因だと発表されています。

PHPバージョン変更はエックスサーバーが柔軟

PHPのバージョン変更機能とは、文字通りPHPのバージョンを変更する機能です。

使う機会は少ないかもですが、現在使っているWordPressのバージョンアップで、今のPHPのバージョンで動作しなくなったときに初めて使うことになると思います。

エックスサーバーの場合は、ドメイン単位ごとにPHPのバージョン変更ができます。しかし、ConoHa WINGの場合はサーバー単位での変更になるので、慎重に進める必要があります。

ConoHa WINGで複数のCMSを動かしていると、WordPressは新しいPHPのバージョンでしか動かないけれど、他のCMSは古いPHPのバージョンじゃないと動かないみたいな板挟みみたいな状況が生まれやすくなってしまいます。

WAF（Web Application Firewall）とセキュリティ機能の比較

ConoHa WINGとエックスサーバーのWAFなどのセキュリティ機能を比較すると以下の表になります。

	Conoha WING	エックスサーバー
WAF	利用可能	利用可能
WAFの除外	個別の事例により除外可能	ファイルの種類で除外可能
IPアドレスのブラックリスト	◯
ログイン試行回数制限		◯
国外IPアドレスからのアクセス制限		◯
大量コメント・トラックバック制限		◯
国外IPアドレスからコメント・トラックバック制限		◯

WAFとはWeb Application Firewallのことで、サーバー内のファイルの改ざんを検知したり防止したりする機能です。ConoHa WING・エックスサーバーのどちらでも利用できますが、設定方法は違います。ConoHa WINGは改ざんされた事例に対して除外を設定ができますが、エックスサーバーはCSS・JavaScriptといったようにファイルの種類のみでしか除外設定ができず、柔軟さに欠けているといった印象があります。

他のセキュリティ機能でもConoHa WINGのほうがIPを指定できるのに対して、エックスサーバーは事前にエックスサーバーが用意したIPのブラックリストを使うだけになりやや柔軟さに欠けている印象があります。

とはいえ、セキュリティ対策に時間をかけるよりは、ブログの記事を書きたいと思う人もいると思うので一長一短だと思っています。なお私は1年ぐらいエックスサーバー上でWordPressを利用していますが設定を変更したことがなく、とくに困ったこともありませんでした。

比較5 ConoHa WINGとエックスサーバーの表示速度を比較

結論：ConoHa WINGが速い

次のような条件でWordPressをインストールをし、表示速度を検証してみました。

その結果、表示速度の平均は次のようになりました。

トップページ・カテゴリーの一覧ページについてはエックスサーバーのほうが平均的に速く、記事ページではConoHa WINGのほうが速いという結果になりました。

トップページ・カテゴリーの一覧ページの差は0.1秒なので誤差の範囲だと思います。しかし、記事ページについてはTwitterの埋め込みを使っているものと、そうでないページで差がくっきり出たように思います。

結果だけみると五分五分なのですが、実際のWordPressサイトだと一覧ページよりも記事ページのほうがページ数は多くなるので、トータルで速いと感じられるのはConoHa WINGになります。

比較6 ConoHa WINGとエックスサーバーの管理画面を比較

Conoha WINGとエックスサーバーの管理画面はそれぞれ次のようになります。

ConoHa WINGの管理画面

エックスサーバーの管理画面

ConoHa WINGは初心者にわかりやすいと評判です。ただ私が実際に使ってみた感じでは、ConoHa WINGの管理画面は画面遷移をするたびに何秒か待たされることがあり、ちょっと重たく感じました。

エックスサーバーには2種類の管理画面があります。1つはアカウント管理用画面で、もう一つはサーバー用の管理画面です。アカウント管理用画面では、サーバーのプラン変更や支払い方法が確認できるものになっていて、サーバーへの設定変更はサーバー用の管理画面から行うイメージです。

レンタルサーバーを初めて触るに人にとってはわかりにくいかもしれませんが、慣れかなと思っています。

ConoHa WINGのメリット・デメリットまとめ

ConoHa WINGのメリット・デメリットをまとめると以下のようになります。

表示速度についてはConoHa WINGが圧倒的な速さとなっています。ただ、トラブルが起こってもネットに情報が少なかったり、サポートセンターの電話が繋がりにくいといった口コミもあったので、ある程度自分で解決できる人はオススメできると思います。

ConoHa WINGのメリット・デメリットは以下のページで詳しく解説しているので気になる方は参考にしてください。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

エックスサーバーのメリット・デメリットまとめ

エックスサーバーのメリット・デメリットをまとめると、以下のようになります。

ほとんど悪いことが見当たらず、ConoHa WINGと比べると表示速度は僅かながらに遅くなってしまう一方、困ったときでも検索をすれば解決策が見つかったり、サポートに質問をしても比較的早く返ってくることが多いので、いろんな人におすすめできるサーバーです。

エックスサーバーについては以下の記事で詳しく解説しています。気になる方は参考に一読ください。

ConoHa WINGとエックスサーバーを比較したまとめ

比較結果をまとめると、次のような感じです。

• ConoHa WING→サポートに過信できないが、早さの面では有利
• エックスサーバー→スピード面ではやや劣るが、設定で困ったときのサポート面で有利

これらを踏まえると、それぞれのサーバーに向いている方は次のような感じになります。

＼ 12/5まで最大53%OFF ／

ConoHa WING 公式サイト

＼ 1/7まで最大30％OFF ／

エックスサーバー 公式サイト

エックスサーバーは速度面で少し不安が残るかも知れませんが、あくまでもConoHa WINGと比較した場合で、他社とのサイトと見比べたらかなり速いほうだと思います。自分にぴったりなレンタルサーバーを使ってください。

ロリポップ！は「安い」と言われているけど、本当のところはどうなんだろう？

ロリポップ！のサポートは大丈夫？

レンタルサーバーを検討する際にまず候補に考えるのがロリポップ！という人も多いと思いますが、他社と比べるとどんなメリットがあるのか、デメリットがあるのかと分からない人も多いと思います。

この記事ではロリポップ！のメリットやデメリット・口コミの分析情報から評判や具体的な申し込み手順を解説しています。

レンタルサーバーは何年もお世話になることが多いので、申し込んだけどやっぱり期待していたものと違った場合にこれまでのWordPressの記事を移行させるとなると面倒なので、なるべくサーバーの引っ越しは避けたいものです。

この記事を読んで、レンタルサーバー選びの一つにロリポップ！を候補に加えてもらえたらと思っています。

ロリポップ！とは

ロリポップ！とは、GMOペパボ株式会社が運営しているレンタルサーバーです。同じスペックでも他社に比べると利用料金が比較的安く、国内のレンタルサーバーNo.2のシェアを誇っています。

「安価だから速度が遅いのでは」と思われるかもしれませんが、ここ2〜3年ぐらいでサーバーの性能改善がなされ、不満があがっていた表示速度も速くなってきました。

WordPressも少ないクリック数でインストールできるので導入が簡単で、WordPress利用満足度調査においてはNo.1を獲得しています。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！のメリット

ロリポップ！は他社に比べると次のような点に強みがあります。

利用費用が月額99円からで業界内でも最安クラス

ロリポップ！は利用料金が同じスペックのサーバーの中でも比較的安く、最安のプランでは月額99円からとなっていて、業界内でも安い部類になります。WordPressを使う上では「ライトプラン」が最安となっていて、月額220円と制限は多いのですが他社に比べてかなり安く設定されています。

「安い」と聞くと品質が気になるところですが、サーバーの大規模な障害も少なく、サポートは可もなく不可もなくといった普通どころとなっているので、心配するよりは利用して自分に合うかどうかを決めた方がよいと思います。

初心者の方が挫折しても、お財布のダメージが抑えられるのは選びやすいですね

WordPressかんたんインストールで初心者でも簡単にブログを始められる

ロリポップ！では、エコノミープラン以上だをWordPressが利用できますが、その際には「簡単インストール」機能を利用できます。WordPressのインストールを管理画面から、ドメインなどの必要情報を入力するだけでWordPressサイトを作れます。

通常であればWordPressの公式サイトからWordPressをダウンロードして…といったことをして、慣れない人がやると平気で1〜2時間費やしてしまったり、罠にハマるといつまで経ってもWordPressを始められないといったようことが起こってしまいます。

2時間近くも時短できるなら、使わない理由がありませんね

サポート体制とマニュアルが充実しているのでトラブルが起こっても解決しやすい

ロリポップ！はサポート体制が充実しています。まずメールは24時間365日受付しているのは当たり前ですが、その返信は2営業日以内に返ってくることがほとんどだそうです。他社のサーバーだと平気で1週間後に返ってくることもあるので、2日で返ってくるのはかなり早いです。

お問合せはどれくらいで返信されますか

数時間～原則48時間以内にお返事を差し上げております。

https://support.lolipop.jp/hc/ja/articles/360049131773-お問合せはどれくらいで返信されますか

また、問い合わせまで待てないといった場合でも対応できるようにマニュアルやFAQが充実しているところが挙げられます。その数580ページ以上。中には動画マニュアルもあるので、人に聞き返さず何回も繰り返しで見れるのはありがたいです。

10日間の無料お試し期間あり

ロリポップ！では、本契約するまでに10日間の無料のお試し期間があります。
そして他と違うのは申し込むにあたってはクレジットカードなどの情報をお試し期間中に入れなくてもいいこと。つまり、メールアドレスだけで無料お試し期間を開始できます。

レンタルサーバーは管理画面なども契約してみないと実際の使い方やサーバーの体感速度がわからないので、積極的に利用して疑問点を解消したほうがよいでしょう。

またこのお試し期間を利用して実際にWordPressをインストールして、記事や画像を入れて動作の検証してみるのがおすすめです。プランも変更できるので、一旦は価格を気にせずにプランを変えてみましょう。

お支払い方法が豊富

ロリポップ！は、他社のサーバーがクレジットカード払い・銀行振込しかないパターンがほとんどですが、コンビニ決済やゆうちょ振替など色々なお支払い方法があります。

クレジット決済とおさいぽ！決済では、払い忘れを防止できる「自動更新」オプションがあります。支払い忘れでサーバーが止まってしまうと、一定期間をおいてページ公開されているものがすべて非公開になってしまいます。気を付けましょう。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップのデメリット

ロリポップ！では契約前に気にかけておくべきデメリットもあります。

バックアップ機能は有料オプション

ロリポップ！には、Webサーバーとデータベースのバックアップを取ってもらうには月330円追加で費用がかかります。バックアップは7世代なので、1週間分のデータを復元可能です。なお他社では無料なので、これはデメリットと言えます。

バックアップってどんなときに使うの？
バックアップ機能は普段使うことはありません。しかし、WordPressをバージョンアップしたらデータベースが壊れてしまったり、Webサーバーに攻撃をされてファイルを書き換えられたみたいなことがった場合に、バックアップデータを使ってデータを復元ができます。 いざというときの保険です。

プラン変更は上位プランへのアップグレードだけで、ダウングレードはできない

ロリポップ！はプラン変更する際には慎重に検討する必要があります。プラン変更が上位へのアップグレードの一方通行なので、ダウングレードができません。

最初の契約でハイスピードプランにしたら、プラン変更できるとしても選べるのは「エンタープライズプラン一択」といった状態になります。

他社ではプラン変更自体ができないものもあるので、比較するとダメというわけではありませんが、もっと柔軟なレンタルサーバー会社だとダウングレードもできる会社もあるので、ロリポップ！にとってはこの点はデメリットであると言えます。

サーバーの速度は他社のほうが速い

ロリポップ！は上位プランにならないと、スピードアップの恩恵を得られることができません。上位プランはサーバーソフトがLiteSpeedというキャッシュを使って速度を上げている工夫がされているのに対して、エコノミープラン・ライトプラン・スタンダードプランでは従来のApacheを使っています。

特に早さが顕著に出るのはWordPressなどのCMSではハイスピードプランを使わないのであれば、他社に比較すると速度は遅くなってしまいます。どれぐらい遅くなるのかは、お試し期間中に実際に検証してみることをおすすめします。

もちろん、ハイスピードプランではLiteSpeedでキャッシュにより演算時間が大幅に削られるので速度は他社と同等のレベルになることが確認されています。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！の評判を口コミから詳しく調査

ロリポップ！は遅い？→本当に特定のプランでは遅かった

ロリポップ！のサーバーが遅いという噂がありました。Twitterで見ても、年に10〜20回程度つぶやかれている方がいました。しかし、2019年を境に遅いといった投稿は減っています。この原因は2019年から始めた高速化したプラン「ハイスピードプラン」によって速度が改善されに移行したのか、他社に移行したものかと思われます。

スピードを重視するのであれば「ハイスピードプラン」か他社のサーバーを検討してみるとよいと思います。ハイスピードプランの速度は確かに速いと言われていますが、コスト面では微妙なところもあります。

ロリポップ！のサポートは悪い？→決して良いわけではない

レンタルサーバーを決める上で気になるのがサポートです。ロリポップ！のサポートについて口コミを感情分析したところ、次のような分布となりました。横軸はポジティブであるか、ネガティブであるのかといった評価で、縦軸が感情の強さを表しています。

この散布図の傾向をまとめると、サポートについてはネガティブなイメージがやや強く、その感情の強さもやや強いといったことが読み取れます。サポートは改善されることを期待したいのですが、個々の意見を取り上げると決して否定的なものだけではなく、好意的なものもありました。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！はこんな人におすすめ

ロリポップ！は速度を重視せず、コストを重視する人がおすすめです。速度を重視すると、ロリポップ！にはハイスピードプランがありますが、このレベルのプランだと他社に劣ってしまいます。

そのため、ハイスピードプラン以外のライトプランやスタンダードプランがおすすめです。従来からのロリポップ！のイメージどおり速度を犠牲にしながらもコスト面はかなり節約できます。

ただし、最安の「エコノミープラン」はWordPressが使えません。この点は申し込み前に必ず確認しましょう。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！のお申し込み手順

STEP

トップページからお申し込み画面に移動する

ロリポップ公式サイトから「お申込み」か「無料で10日間でお試し」をクリックします。

STEP

利用するプランを選択する

5つのプランから申し込むプランを選んで、ボタンをクリックします。

STEP

ドメイン名とパスワードとメールアドレスを入力

初期ドメイン・パスワード・メールアドレスを入力します。

初期ドメインは最初に公開されるURLになります。独自ドメインを取得するまでの暫定URLになるので、あまり悩まず入力してください。

ここで「ハイスピードプラン」を選んだ場合には「独自ドメイン」を取得できるようになっています。しかし、これをONにしてしまうと無料お試し期間がなくなってしまうので気をつけてください。

STEP

SMS認証コードを送信する

SMS認証で本人かどうかを確認します。

電話番号を入力して、「認証コードを送信する」をクリックします。

STEP

認証コードを入力する

認証コードを入力して、「認証する」をクリックします。

STEP

個人情報を入力する

契約種別を確認して、①お名前 ②フリガナ ③郵便番号 ④住所 ⑤電話番号を入力します。

⑦〜⑨のチェックボックスはOFFで大丈夫です。 ⑦「お申し込みと同時にWordPressをインストールする」だとインストールが公開フォルダの下になってしまうのでチェックを入れなくてもOKです。

⑧「お支払いを自動更新にする」は支払いを忘れやすい人が入れてもいいですが、お試しのつもりで契約するのであればチェックを入れなくても問題ありません。

⑨有料オプションもあとから変更できるので、体験して気に入ったら必要に応じて申し込めばよいと思います。そのため今の時点ではチェックを入れなくてもOKです。

「お申し込み内容確認」をクリックします。

STEP

入力内容を確認する

内容を確認して「無料お試し開始」をクリックします。

STEP

お申し込み完了

押すと「無料お試し開始」のボタンが「お申し込み中」となります。そこから約30秒〜1分ぐらい待つと画面か切り替わりお申し込みが完了します。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！にWordPressをインストールする手順

STEP

管理画面から簡単インストールを開く

管理画面の左側のメニューの［サイト作成ツール］→［WordPress簡単インストール］をクリックします。

STEP

必要情報を入力する

インストールに必要な情報を入力します。

①サイトURL	ブログのトップページのURLを決めます。何も入れなくてもOKです。
②サイトのタイトル	ブログのタイトルを入力します。後から変更もできるので気軽に入力しましょう。
③ユーザー名	WordPressにログインする際のユーザー名を入力します。
④⑤パスワード	WordPressにログインする際のパスワードを入力します。
⑥メールアドレス	WordPressからの通知を受信するメールアドレスを指定します。
⑦WordPressテーマ	最初に設定するWordPressのテーマを指定します。お好みでどうぞ。

以上の入力が終わったら、⑧［入力内容確認］をクリックします。

STEP

内容を確認する

少し待つと、確認画面に切り替わります。 内容を確認して、［承諾する］にチェックを入れて、［インストール］をクリックします。

STEP

インストール完了

30秒ぐらい待つと、WordPressがインストールされ画面が切り替わります。 切り替わったら「管理者ページURL」をクリックします。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！のよくある質問

初心者におすすめのロリポップ！の料金プランは？

初心者におすすめの料金プランは「ライト」プランをおすすめします。なぜならWordPressが1番安く構築できるから。もし、実際に使ってみてページの表示が遅いと思ったらハイスピードプランなどに移行すると良いと思います。

ロリポップ！の転送量の制限はある？

サーバーからホームページ閲覧者へHTMLファイルやCSS・JavaScriptを送るデータの送料を転送量としていたのですが、ロリポップ！では無制限になりました。

ロリポップ！でPythonやNode.jsは使える？

ロリポップ！のレンタルサーバーでは使えません。ロリポップ！にこだわりがあれば、VPSのサービスもあります。

ロリポップ！にクーポンはある？

ロリポップ！にクーポンはありませんでした。しかし、定期的にキャンペーンはやっているので定期的に確認することをおすすめします。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！の料金プラン

ロリポップ！では5つの料金プランがあります。

初期費用

ロリポップ！の初期費用は、ハイスピードプランより上位のプランは0円となっています。

月額費用

ロリポップ！の月額費用は、料金プランと契約期間に応じて価格が変わります。
長期契約をすると料金は低くなりますが、途中で解約をした場合に返金はされない点はお気を付けてください。

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

ロリポップ！のキャンペーン・クーポン情報

現在開催中のキャンペーン

現在開催中のキャンペーンは1件あります。

コスパNo.1！最大で契約期間2倍延長キャンペーン

＼ 10日間無料お試し期間付き！ ／

ロリポップ！

終了したキャンペーン

新生活応援キャッシュバックキャンペーン

概要	キャンペーン期間中の新規お申込み、入金締め切り日までのご入金＋弊社指定のフォームに口座情報を記載いただきましたら、ご指定の口座へキャッシュバック！ 12ヵ月：5,500円 36ヵ月：3,000円
対象	キャンペーン期間中にハイスピードプランの12ヶ月・36ヶ月の契約プランをし、入金締め切りまでに入金された方
期間	2023年3月7日（火）18:00～2023年3月24日（金）23:59

契約期間2年延長キャンペーン

概要	キャンペーン期間中の新規お申込み、入金締め切り日までのご入金で契約期間を24ヶ月間自動延長
対象	以下の２点を満たせば、契約期間を24ヶ月間自動延長いたします。 3月3日〜3月5日キャンペーン期間中にハイスピードプランを新規お申込み その後、無料期間10日以内に契約（ご入金完了）
期間	2023年3月3日（金）0:00～2023年3月5日（日）23:59

ハイスピードプラン36ヵ月を契約しようキャンペーン

概要	キャンペーン期間中の新規お申込み、入金締め切り日までのご入金で3,960円をご指定の口座へキャッシュバック
対象	ハイスピードプランを36ヶ月契約したお客様
期間	2023年1月27日（金）12:00～2023年2月10日（金）23:59

HTMLで新しいタグを覚えたり、CSSの新しいプロパティを勉強すると、早速使ってみたくなります。しかし、初心者の方だと次のような壁にぶつかってしまうこともあります。

本でHTMLタグの内容やCSSのプロパティの理解はできたけれど、ページをまだコーディングしたことがないから、具体的な手順が分からない

よく見るサイトのデザインを再現するのがいいと聞いたけど、実際のサイトは再現するのに難易度が高い

この記事ではHTML・CSS・JavaScriptの基礎的な部分を覚えた人が、次のステップとしてコーディングの練習するためにコーディングの課題を配布しているサイトを6つ紹介しています。無料で挑戦できる課題だけでも33個もあります。

未経験の勉強方法から就職、フリーランスとなって案件獲得までの流れをまとめています。あわせて参考にしてください。

あわせて読みたい

【2024年】未経験からWebデザイナーになるまでの知識：独学での勉強方法から案件獲得まで Webデザインって本当に独学で習得できるの？ どんなスキルが必要？ 実際にWebデザイナーになれるの？ そんな疑問を持つ方も多いのではないでしょうか。適切な学習方法と…

HTML・CSSコーディングの課題を公開している6サイト

無料コーディング練習所

無料コーディング練習所

コーディングの前段階である画像を書き出すところから丁寧に解説されています。課題も充実していて、後半になっていくとパララックスの実装をしたり、Sassまで出てくるので一通り網羅されている印象です。

模写修行

模写修行

こちらは無料の課題2つと有料の課題が7種類用意されています。解説は画像にするべきか、デバイステキストで表現すべきかといったときの考慮点や画像の書き出し方など、コーディングする上ではかなり細かいところまで取り上げて解説されています。

Codestep

Codestep

課題掲載数が1番多く、28個の課題があります。コーディングを最初に始める際に、初心者が悩みやすい「このグループはdivにすべきか、headerにすべきか、、、」といった要素分けは最初にヒントもあるのでスムーズに始められます。

PENGIN BLOG

PENGIN BLOG

Progateなどの学習サイトでHTMLやCSS、JavaScriptを勉強した人向けです。そのためタグなどの細かな解説は少なめですが、中級からの動画による解説でEmmetのデモが見られるのはありがたかったです。

web鍛

web鍛

書き出した後の画像のみを配布しているので、PhotoshopやXDも使わずにコーディングを鍛えられます。要素と要素の間が何ピクセルなのかという指示書もダウンロードできるので目視で確認する必要はありません。

書き出しされた画像からデザインを組み立てていくという形なので他の課題とは少し毛色が違う感じがしますが、昔はこういった形で書き出された画像だけを受け取って、デザインを起こすといったこともやっていました。

吉川ウェブ

吉川ウェブ

初心者の方だとデザインが存在しない部分もあるため少し難しいところがありますが、1枚のPNG画像に要件も記載されたところから、HTMLを書き起こす形の練習課題です。

解説もないので、ある程度慣れてきたら挑戦してみるとよいと思います。

まとめ

今回はHTMLやCSSのコーディング課題を掲載をしているサイト6つを紹介してみました。とっつきやすいなと思ったサイトがあったら、課題に挑戦してスキルを磨きましょう。

昔はこういう課題を配布しているサイトがなかったので、Webデザインギャラリーサイトから気に入ったサイトを見つけて模写するのが王道でしたが、今は解説付きでできるだなんていい時代になりましたね。羨ましいです。

ConoHa WINGの評判ってぶっちゃけどうなの？

ConoHa WINGを検討中だけど、評判が心配

ConoHa WINGはWordPressの速度がレンタルサーバーの中では最速で、よくオススメされているサーバのうちの1つです。この記事では口コミ評判から分かった、メリット・デメリット、料金などを紹介していきます。

ConoHa WINGとは

ConoHa WINGは、GMOインターネットグループ株式会社が提供しているレンタルサーバーのサービスです。WordPressサイトの表示速度が速いことや、月額660円で使えることが魅力で多くのブロガーに利用されています。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGのメリット

WordPressサイトの表示速度が速い

ConoHa WINGは速度が速いサーバーという売り方をしているので、表示速度にはかなり自信があることがうかがえます。サービスを提供している調査データによると、他社とのスピードの差はなんと2倍近い数字をたたき出しています。

管理画面が見やすい

ConoHa WINGは管理画面が見やすいといったことでも知られています。

他社のレンタルサーバーの管理画面は、契約周りとサーバー管理の2つの管理画面があるのに対して、ConoHa WINGの管理画面は合体したものを管理画面として提供しています。そのため、わざわざ複数の管理画面に入らずにサーバーの操作をひとまとめにできるので使いやすいといった評判になっているように思います。

また管理画面の作りも、なるべく初心者にとって難しいと思われるものについては下層のメニューにしまうなど、きめ細やかな作りになっています。

無料ドメインが永久無料

ConoHa WINGでは月額固定の「WINGパック」と、1時間あたりの使用状況で課金される「通常パック」の料金タイプがあります。違いは課金形態だけではなく、WINGパックでは独自ドメインが2つ無料になる特典が付いてきます。

WINGパックには長期の契約をすればするほど、割引率も上がってくるので長期で使うことがわかりきっているのであればWINGパックがお得です。

通常パックはポートフォリオやブログなどの長期で公開するサイトには向いておらず、3ヶ月以内の短い間のサイト公開に向いています。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGのデメリット

運用歴が短いため不安を感じる点が多い

他のレンタルサーバーサービスは2005年から2010年からサービス開始したサービスが多い中で、ConoHa WINGは2018年からスタートしたサービスです。そのため、運用歴は圧倒的に短いサービスになります。それゆえに「なんだか不安」と感じることが多いようです。

しかし、運用会社であるGMOインターネットではConoHa WING以外にもお名前.com レンタルサーバー事業を行っています。また、グループ会社であるGMOペパボでもロリポップ・ヘテムルなどのレンタルサーバー事業を行っています。これらの事業ノウハウをConoHa WINGに費やしたと考えると、不安に感じるというよりはむしろ安心と言えます。

運用歴自体は短いのですが、それでも「GMOグループ」という安心感はありがたいです。

利用者が少なく検索してもネットに情報が少ない

ConoHa WINGは運用歴が短く、他のレンタルサーバーに比べると利用者も比較的少ないです。

困ったことがあってGoogleなどの検索エンジンで検索をしても解決策がひっかからず、解決に至れない可能性が他のサーバーに比べて高いことがデメリットととして挙げられます。

サポートももちろんありますが、1から10までサポートに頼っているとどんどん時間が溶けてしまいます。そのため、ある程度自力で解決できる人におすすめできます。

サポートセンターの電話が繋がりにくく、メールの返事も遅い

ConoHa WINGのサポートは強く期待できるものではなさそうです。電話をしても1時間以上繋がらないこともあるようです。また、メールで問い合わせても返信も1日以上経ってから来るといった報告がTwitterから多数見つかりました。

2022年のConoHa WINGのサポートに対する口コミは40件程度で、この口コミをAIによってポジティブかどうか、感情はどれぐらい強いのかを分布図にすると次のようになり、否定的な口コミが若干多く、感情としてもやや強いと言えます。

WordPressを初めてやる場合だとわからないことが多く、何度も調べてみるものの、なかなか解決に至れないといったことがよくあります。そんな切羽詰まったときにサポートに頼りたいところですが、サポートがこの調子だと頼るのは厳しいかもしれません。

もちろん、これまでに問い合わせをしたことがなくブログやサイト運営をしてきた人なら自力で解決できると思うので大きく気にならないと思います。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGの評判を口コミから調査

ConoHa WINGは障害が多い？→大規模な障害はないが、公式からの発表が遅い

ConoHa WINGは障害が多いと言われていますが、2022年時点ではサーバーの一部がダウンしていて大規模な障害は口コミからは確認できませんでした。公式で発表されている障害情報は2022年では1件と少ないものの、他のレンタルサーバーと同様に一部のサーバーが障害を起こしているようです。

口コミを詳しく見てみると障害情報の発表が遅くて利用者から不満が出ているのを確認できました。

ConoHa WINGは解約しにくい？→確かに分かりにくい

ConoHa WINGの解約はやりにくいという噂がありましたが、これは本当でした。 ここでいう「解約」はアカウントを削除するまでのことで、自動課金をOFFにするだけなら簡単です。（ただし、返金はされません）

アカウントを削除する場合は「契約期間が終わってから」になります。契約が満了する日までは忘れないように待つしかできず、この途中でアカウントを削除できないところがもどかしいと感じているようです。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGの口コミのまとめ

ConoHa WINGへの肯定的な口コミ

ConoHa WINGへの否定的な口コミ

ConoHa WINGの口コミのまとめ

まとめると、このような口コミです。

人によって早い・遅いの体感速度の違いはあるものの、ページの表示速度については早いという評価です。サポートについては、お世辞でも良いものと言える感じではなさそうです。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGはこんな人におすすめ

ConoHa WINGはこのような方におすすめです。

ConoHa WINGのお申し込み手順

ConoHa WINGをお申し込みするまでの手順を紹介します。

STEP

公式サイトに移動する

ConoHa WINGのページに移動し、［お申し込み］ボタンか［今すぐアカウント登録］をクリックします。

STEP

メールアドレスとパスワードを入力する

メールアドレス2回と、パスワードを入力し、［次へ］をクリックします。

STEP

契約期間と契約プランの選択する

必要事項を入力して、⑪［次へ］ボタンをクリックします。ボタンが押せない場合は、必須項目が入力できていないので記入漏れがないか確認してください。

①契約期間	3ヶ月・6ヶ月・12ヶ月・24ヶ月・36ヶ月の中から契約期間をクリックします
②プラン	ベーシック・スタンダード・プレミアムの中からプランをクリックします
③初期ドメイン	初期ドメインを入力します。独自ドメインを使うまでの一時的なものなのでそのままで問題ありません。
④サーバー名	サーバーの名前を入力します
⑤WordPressかんたんセットアップ	WordPressかんたんセットアップを使う場合は［利用する］を選択します。 ［利用する］を選択した場合の決済方法はクレジットカード一択になるので、他の決済方法を考えている人は［利用しない］を選びましょう。
⑥セットアップ方法	［新規インストール］を選択します
⑦独自ドメイン名	取得したいドメイン名を入力します（後から変更できません！）
⑧作成サイト名	WordPressでのサイト名を入力します
⑨WordPressユーザー名	WordPressにログインするユーザー名を入力します
⑩WordPressパスワード	WordPressにログインするパスワードを入力します

STEP

個人情報の入力する

必要情報を入力して［次へ］をクリックします。

• 個人か法人かの種別
• 氏名
• 性別
• 生年月日
• 国
• 郵便番号

• 都道府県
• 市・区
• 町村番号
• 建物名など
• 電話番号

STEP

SMS/電話の認証をする

電話番号を確認して［SMS認証］か［電話認証］のどちらかをクリックします。 SMS認証はスマートフォンのショートメッセージが送られてくるだけなのでお手軽です。

スマートフォンに届いた認証コードを入力して［送信］をクリックします。

STEP

決済情報の入力する

最後に決済情報を入力します。

クレジットカードの場合は次を入力します。

• 名義
• カード番号
• 有効期限
• セキュリティコード

入力を完了したら、［お申し込み］をクリックします。

STEP

完了

サーバーお申し込みは完了になります。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGにWordPressをインストールする手順

お申し込みの際にクレジットカード以外の決済手段を使ったり、通常パックで契約をした場合はサーバーの管理画面からWordPressをかんたんにインストールできるようになっています。

STEP

管理画面からサイト管理画面に移動する

［サイト管理］をクリックします。

STEP

WordPressの設定情報を入力する

［＋ WordPress］をクリックします。

必要事項を入力して［保存］をクリックします。

インストール方法	新規でインストールする場合はそのままでOKです
バージョン	一択なのでそのままでOKです
URL	WordPressをドメイン内のどこに置くのかを決めます
サイト名	WordPress内で使うサイト名です（後から変更できます）
メールアドレス	WordPressにログインする際のメールアドレスを入力します
ユーザー名	WordPress内で使うユーザー名を入力します
パスワード	WordPressにログインする際のパスワードを入力します
データベース名	そのままでOKです
データベース ユーザー名	そのままでOKです
データベース パスワード	ヒントに沿ってパスワードを入力します
コントロールパネルプラグイン	WordPressの管理画面からサーバーの設定の一部を操作できるプラグインです
自動キャッシュクリアプラグイン	自動でキャッシュを削除するプラグインです。そのままでOKです。

STEP

WordPressの管理画面に移動する

20〜30秒ぐらい待つと、ステータスが「構築待ち」から「稼働中」になります。

ステータスが「稼働中」になったら「管理画面URL」のURLをクリックします。

STEP

WordPressにログインする

メールアドレスとパスワードを入力して、［ログイン］をクリックします。

STEP

お好みでカスタマイズ

あとはここからプラグインの追加や、テーマのカスタマイズを進めていきます。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGのよくある質問

独自ドメインは必要ですか？

なくてもホームページを持てますが、URLをシンプルに覚えやすくするには必要です。

独自ドメインはレンタルサーバーを変更しても、URLを引き継いで使うことがあるので、名刺やメールの署名などを書き換えずに済むようになります。

ConoHa WINGでは、最初の契約段階で1年以上の契約をし、自動更新を有効にした場合、契約終了まで無料でドメインを1個取得できるので、これを機会に使うべきだと思っています。

ConoHa VPSとは？ConoHa WINGとの違いは？

ConoHa WINGが1つのサーバーを複数人で共有するのに対して、ConoHa VPSは1つのサーバーを仮想的に1つのサーバーとして見立てて複数人と共有する形になります。そのため、レンタルサーバーのように他のユーザーによる影響を受けにくく、安定した速度を出せることができます。

ただし、自由度が高くてサーバーの知識をかなり要するので、使いこなすのはとても難しいので初心者の方にはおすすめできません。レンタルサーバーのConoHa WINGをおすすめします。

プランや料金タイプの変更はできるの？注意点は？

ConoHa WINGは上位プランへも下位プラン、どちらへも変更可能です（ディスク容量が下位プランの上限を超えている場合はできません）。契約期中に上位プランへ移行するには差額を払えば変更できますが、下位プランに移行する場合は返金とならない点は気を付けましょう。

また月額固定の「WINGパック」から1時間あたりの課金形態になる「通常パック」の切り替えもいつでも行えますが、WINGパックから通常パックになる場合はWINGパックの契約期間が満了してから切り替えになります。

またWINGパックから通常パックに変更した場合、WINGパックの特典で取得したドメインは更新代を毎年払う必要が出てきます。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGの料金プラン

ConoHa WINGの料金プランは3種類と、月額固定か時間単位の料金パック、さらに月額固定のWINGパックの中では契約期間に応じて金額が変わってきます。

WordPressでブログを作りたい人はWINGパック

ブログは長期で運用することが前提になるのでWINGパックのほうがお得になります。契約期間が長いほど割引率も高くなりますが、途中でブログを挫折しても返金されることはないので2年以上契約する場合はそれなりの覚悟をしておいたほうがよいと思います。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGはよくキャンペーンをやっています。これらのキャンペーンは初回の契約のみに適用され、2回目移行は通常料金になり最初の契約時との金額差にびっくりすることもあります。

更新期間が近づいたら案内はメールで案内が来るので、料金は注意深くみておきましょう。
また、コストを抑えたい場合はエックスサーバも検討するといいと思います。

サーバーの引っ越しを検討中の人は通常パック

他のサーバーから引っ越す場合には、サービスの違いを知るために通常パックがおすすめです。ConoHa WINGには無料お試しがないので、通常パックでこれまでのサーバーの管理画面が自分に合うのか、違うドメインをとりあえず作って速度を検証してみるといったテスト運用に向いています。そのテスト運用終了後に契約すべきかどうかを決めるとよいと思います。

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

ConoHa WINGのキャンペーン情報

開催中のキャンペーン

ConoHa WINGでは2024年11月現在キャンペーンが1件あります。

Early Winterキャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大55%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2024年11月6日(水) 16:00～2024年11月20日(水) 16:00

＼ 11/6まで 最大53%OFF！ ／

ConoHa WINGのお申し込み

終了したキャンペーン

スタート応援キャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大53%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2024年10月21日(月) 16:00～2024年11月6日(水) 16:00

スタート応援キャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大54%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2024年10月7日(月) 16:00～2024年10月21日(月) 16:00

春の応援キャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大55%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2023年3月7日(火) 16:00～2023年3月31日(金) 16:00

スタートダッシュキャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大52%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2023年2月28日(火) 16:00～2023年3月7日(火) 16:00

55万人アカウント突破記念キャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大55%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2023年2月7日(火) 16:00～2023年2月28日(火) 16:00

スタートダッシュキャンペーン

概要	キャンペーン期間中、レンタルサーバーの料金タイプ「WINGパック」の12カ月以上を新規でお申し込みいただくと、通常料金から最大52%OFF、月額687円からWINGパックをご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2023年2月1日(水)16:00～2023年2月7日(火)16:00

Webサイト制作応援キャンペーン

概要	WINGパック「ベーシックプラン」で12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みいただくと、対象プランがConoHa WING通常料金より最大50%OFFでご利用いただけます。
対象	キャンペーン期間中にWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約を新規でお申込みまたはWING通常料金からWINGパック「ベーシックプラン」12ヶ月、24ヶ月、36ヶ月契約へプラン変更された全てのお客様
期間	2023年1月17日(火)16:00～2023年1月31日(火)16:00

「エックスサーバーの評判って実際のところどう？」

「エックスサーバーは他のレンタルサーバーとどのような点が違うの？」

「エックスサーバーの契約時に気を付けるべきことは？」

レンタルサーバーを検討していると、どのサイトでも「エックスサーバー」がおすすめされています。しかし、エックスサーバーは本当に選んでいいものなのかは、実際の評判を見ないとわかりません。この記事ではエックスサーバーについての口コミからメリット・デメリット・料金プランををまとめて紹介しています。

レンタルサーバー選びの参考にご利用ください。

エックスサーバーとは

エックスサーバーは、国内のレンタルサーバーでシェアNo.1のサービスです。サービスが開始されたのは2004年からで記事執筆時点では21年の運用実績があります。公式発表では導入企業は21万社・運用サイト数は250万件以上とのことです。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーのメリット

WordPressに最適化された実行環境を提供しているので初心者でも安心

エックスサーバーでは、WordPressのかんたんインストール機能が用意されています。これを使うと、3クリック程度でWordPressをインストールできます。時間でいうと管理画面にログインしてから3分ぐらいです。

また、作成されたWordPressは「KUSANAGI」というCMSの高速化技術を搭載していたり、「オールVNMe」といったストレージへの最適化も行っており、ページを表示するまでの時間を可能な限り短縮化していると言えます。

国内シェア1位なので情報量が多い

HostAdviceの調べによると、国内で一番使われているレンタルサーバーはエックスサーバーで14.7％です。そのシェアの多さから運用実績は記事執筆時点で21年、導入企業は21万社・運用サイト数は250万件となっています。

そのため、エックスサーバーでやってみたいことをGoogleなどの検索エンジンで調べると、ブログ記事が引っかかり何かしらの答えが見つかりやすく、自分で解決しやすいといったメリットがあります。

自己解決ができない場合はもちろんサポートも用意されています。電話・チャット・メールと3つの連絡手段があります。初心者の方だと選ぶサーバーとしてはありがたいサービスだと思います。

稼働率が99.99%以上なので安心して公開できる

エックスサーバーは2022年の実績から見ると、大規模な障害が1回発生していて、他のレンタルサーバーと比較しても平均的なレベルです。ちなみにAmazonでも年に1回は大きな障害が起きると言われているので、障害を1度も起こさず1年を超えるのは至難の業とも言えます。

その稼働率は99.99%。システムが利用できない時間を年間で約54分以内に抑えないと99.99%を名乗ることはできません。一定の障害リスクはあるものの、万が一の障害が起こった場合でも復旧までの時間も短いので、気になるほどのものではないと思っています。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーのデメリット

エックスサーバーにはメリットだけではなく、もちろんデメリットも存在します。契約する前に気を付けておくべきことは2つあります。

設定変更に時間がかかるものがある

エックスサーバーは一部のサーバー設定での反映が遅いことがあります。たとえばWAFの設定。設定項目をONにすると、20〜30分ぐらいの時間がかかって、その間は「反映待ち」という状態になってしまいます。

セキュリティの設定なのでバックグラウンドで何かしらの処理をやっているのだろうとは思いますが、もうちょっと早くなってくれたら嬉しいですね。この設定は毎回ON/OFFにするような設定ではないので、大きく気にする必要はないと思います。

最低契約期間が3ヶ月からなので他と比べて長い

エックスサーバーは最低契約期間が3ヶ月とレンタルサーバーに比べて少しだけ長いです。その間に解約をしても、払い戻されることがなく契約が満了されるまでの間はブログは公開されている状態になります。

ブログにしてもポートフォリオを作成するにしても3ヶ月では形になった感じがせずに終わってしまうような気もしてしまいます。なるべく長期で契約したほうがお得で、契約更新の頻度も落ちて楽でした。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーの料金プランのまとめ

エックスサーバーの料金は初期費用が無料です。月額料金は3つのプランに分かれていて、さらに契約期間に応じて値段が5種類に分かれています。

最低契約期間は3ヶ月ですが、長期契約にすればするほど安くなります。

他社との料金比較：年額約3,000円程度高いものの、キャンペーンで優勢に

エックスサーバーの利用料金は他のレンタルサーバーと比較すると、金額は月額500円程度高い設定になっています。

レンタルサーバーの料金は「1年間で合計どれぐらいかかるのか」で見ていきましょう。キャンペーンを考慮せずに比較すると、エックスサーバーが一番高く、それに次いでロリポップがかなり安いという位置づけになっていました。

	レンタルサーバー	初期費用	月額費用	1年契約した場合の費用	半年契約した場合の費用	ディスク容量	無料お試し期間	MySQLの個数	独自SSL	自動バックアップ	WordPress簡単インストール
①ポートフォリオを 作りたい	ロリポップ！	0円	264円〜	5,940円	3,102円	350GB	10日間	50個	あり	あり	あり
②ブログとポートフォリオを 作りたい	エックスサーバー	0円	990円〜	13,200円 →10,560円 1/7 17:00まで	7,260円	500GB	10日間	無制限	あり	あり	あり
③クライアントワークで ブログを作りたい	ConoHa WING	0円	990円〜	17,424円 →11,292円 12/5 16:00まで	7,260円	300GB	なし	無制限	あり	あり	あり

しかし、キャンペーンで値段がかなり変わってきます。
エックスサーバーは11/5 17:00までに新規申込で1年以上契約した場合、半額がキャッシュバックされるキャンペーンを開催しています。これを考慮すると、エックスサーバーが割安になります。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーの評判を口コミから調査

障害やメンテナンスが多い？→2日に1回ぐらいで数百台のうち数台で発生

エックスサーバーは障害が発生しがちのように思われますが、これはその通りでした。ただし、全サーバーがダウンするといったようなことではなく、数百台ぐらいあるうちの1台のサーバーで障害が起こっているといった状況です。

なお、2022年中は1回、全サーバーが2時間ダウンするという大規模な障害が起こっていました。原因はデータセンターの電源の故障だそうです。

障害はある程度起こるものだと想定しておくと良いと思います。対応策がないこともないですが、単純にサーバーの費用が2倍になるので、ブログ用途だとそこまでメリットがないような気がしています。

サポートの質が悪く解決に時間がかかる？→賛否両論なもののややポジティブ

Twitterの口コミでは2022年では175件サポートのことが言及されていて、評価は人によってまばらでした。良い評価やエックスサーバーのファンのように応援している口コミもあったり、一向に解決しなかったといった口コミも存在していました。

良かった口コミはこのような感じです。

悪かった口コミはこのような感じです。

これら口コミをひとつひとつAIで感情分析すると、口コミの分布は次のようになりました。
横軸がポジティブ・ネガティブ具合で、右になればなるほどポジティブな評価です。反対に左に傾くとネガティブな口コミが多いということになります。縦軸は感情の強さとなっていて、上にいけば行くほど感情が強くなります。

上記を見ると、どちらもバランスよく分散していているのがわかります。
感情の強さも組み合わせて見てみると、ポジティブのほうが全体的に上に分散しているので、わずかながらポジティブなほうが優勢といったところです。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーの評判を口コミまとめ

エックスサーバーはTwitterでも2022年で4,000件以上口コミが投稿されていました。その中から善し悪しについて言及してるものから代表的な口コミを紹介します。

エックスサーバーの肯定的な口コミ

エックスサーバーもConoha Wingも電話サポートがあるってこと知らない方、意外に多いと思います

管理画面にログインできないとか、メールが届かないとか、ブログが表示されないとか。

こういうケースはアドバイスがもらえるかもしれません。

ただ、電話は平日のみなので、お気を付けください

— さっとが@半農半ブロガー (@sattoga) January 14, 2022

エックスサーバーの否定的な口コミ

エックスサーバーがチャットサポートをリリースされたみたいですね！
他のレンタルサーバーよりも少しだけお高いですが、サイト表示の安定性やWAFがWordPressの更新を邪魔しないなど、僕は長年エックスサーバー推しです。今後も推してまいります。いつもありがとうございます。

— はぎわら じゅんき | HP制作と集客支援 (@junkinsu55) March 15, 2022

昨日のエックスサーバーの通信障害は参りましたね。復旧するまでググりまくりました。こんな時Twitterの情報が1番早いなと感じました。おかげで通信障害だと分かりましたからね。原因が分からない時は不安ですし時間も取られます。今後もトラブル時はTwitterで情報集めようと思います。#ブログ仲間

— 岩永@アフィリブログ×パソコン転売 (@JIRO_PAPA_BLOG) September 16, 2022

エックスサーバーのサーバパネル重い。。。DOS攻撃で障害発生したらしいけど、もう復旧したって書いてあるのになぁ。
いいやもう今日はやめよっ

— YAS@ (@Studio_YAS_) February 28, 2024

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーの口コミまとめ

エックスサーバーに関する口コミをまとめると、次のようになります。

あと調べてわかったのですが、何かしら障害が起こったら、Twitterですぐに口コミがあがってくるので「私だけじゃないんだ」と安心される方も多かったです。逆に口コミがあがってきていないとしたら自分の環境だけで起こっている可能性があるので、設定を見直したり、サポートに連絡して解決したほうがいいと思います。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーはこんな人におすすめ

エックスサーバーはこのような方におすすめです。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーとConoHa WINGと比較した場合では、エックスサーバーのほうがおすすめしやすいサーバーでした。というのも、エックスサーバーはサーバーの速度はやや劣るものの、サポート面は他のレンタルサーバーに比べて満足度が高いので、初心者の方にはおすすめできるサーバーです。

エックスサーバーのお申し込み手順

STEP

申込ボタンを押す

エックスサーバーのホームページにアクセスをして、［お申し込み］をクリックします。

［10日間無料お試し 新規お申し込み］をクリックします。

STEP

エックスサーバーのプランを選択する

①サーバーIDは初期ドメインとも呼ばれるものなので適当で構いません。

②プランはお好みで選択してください。（キャンペーンでスクリーンショットと月額は変わっている可能性があります。）
「WordPressクイックスタート」はありますが、無料お試しができなくなったり、ドメインをエックスサーバーで取得することになってリスクを一極集中させてしまうのであまりオススメできません。

③入力内容を確認して「Xseverアカウントの登録へ進む」をクリックします。

STEP

メールやお名前の入力する

①個人情報を入力します。入力項目は以下のとおりです。

• メールアドレス
• パスワード
• 個人・法人の登録区分
• お名前とフリガナ
• 住所
• 電話番号

②「利用規約」と「個人情報の取り扱いについて」に同意をするため、クリックしてチェックをONにします。そうすると③［次へ進む］のボタンがオレンジ色になるので、クリックして次へ進みます。

まだオレンジ色にならない場合は必須項目が未入力だったり、入力内容が不十分である可能性が高いです。再度確認してください。

STEP

メールに送られた確認コードの入力

前の画面で入力したメールアドレスにメールが1件送信されています。
その中から①認証コードをコピーしておき、もとのブラウザにもどります。

ブラウザに戻ったら②確認コードを入力欄に貼り付けます。
ペーストしたら③［次へ進む］をクリックします。

STEP

入力内容確認画面

入力内容を確認して問題がなければ「SMS・電話認証へ進む」をクリックします。

STEP

SMS・電話認証コード取得画面

先ほどのメール認証と同様の流れで認証をしていきます。取得方法はテキストメッセージで取得するほうがいちいち自分から行動しなくてもいいのでおすすめです。

①電話番号に誤りがないか確認して②［認証コードを取得する］をクリックします。

STEP

SMS・電話認証コード入力画面

スマートフォンのSMSから認証コードを受け取って、それを①の入力欄に写します。
②の［認証して申し込みを完了する］をクリックします。

STEP

アカウント作成

これでアカウントの作成が完了できました。

メールでは「■重要■サーバーアカウント設定完了のお知らせ 」といったタイトルでメールが来ていると思います。このメールには管理画面へのアクセス方法や初期パスワードが記載されているのでので、削除せずに大事に保管してください。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーにWordPressをインストールする流れ

STEP

サーバーパネルにログイン

サーバーパネル ログイン画面に移動して、サーバーIDとサーバパネルパスワードを入力します。

ちなみにサーバーID・サーバパネルパスワードは、「■重要■サーバーアカウント設定完了のお知らせ 」のメールの中に記載されています。

STEP

WordPress簡単インストールの起動

サーバーパネルにログインができるとサーバーパネルに画面が移動します。その画面から「WordPress簡単インストール」をクリックします。

WordPressをインストールするドメインを選択します。

［WordPressインストール］をクリックします。

STEP

メールアドレスなどの必要情報の入力

必要な情報を入力して［確認画面へ進む］をクリックします。「テーマ」とはWordPressのデザインのことで、あとから変更できるので適当で構いません。

内容を確認して、［インストールする］をクリックします。

「『index.html』が削除されます。」という注意書きがありますが、サーバー設定の完了時に作成されたファイルなのでこれは削除しても問題ありません。

これでWordPressがインストールできました。「管理画面URL」をクリックします。

STEP

WordPress管理画面にログイン

ここからはWordPressの画面になります。 先ほど入力したメールアドレスと、パスワードを入力して、［ログイン］をクリックします。

ログインができると、以下のようにWordPress管理画面に移動します。 これで記事を追加したり、ブログの設定ができるようになります。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーのよくある質問

エックスサーバービジネスの違いは？

エックスサーバービジネスプランとは、通常のレンタルサーバプランと比べてサポートやセキュリティが手厚くなっている法人向けのプランです。

具体的には、サーバー移転やWordPressのインストールなどの設定代行を月に一定回数無料となっていたり、Web改ざん検知機能やセキュリティ診断といったセキュリティを自動的にチェックしてくれる機能などがあります。

企業となると多くのお客様の個人情報を扱うようになるので、このようなセキュリティ対策が標準で付いていると被害を大きく出さずに安心できそうです。

独自ドメインは必要ですか？

なくてもホームページを持てますが、URLをシンプルに覚えやすくするには必要です。

独自ドメインはレンタルサーバーを変更しても、URLを引き継いで使うことがあるので、名刺やメールの署名などを書き換えずに済むようになります。

エックスサーバーでは、最初の契約段階で1年以上の契約をし、自動更新を有効にした場合、契約終了まで無料でドメインを1個取得できるので、これを機会に使うべきだと思っています。

エックスサーバーを解約したい

レンタルサーバーの管理画面にログインして、解約したいサーバーの右の3点ドット（･･･）をクリックします。

契約情報の詳細画面から［解約する］をクリックします。

［解約申請をする］をクリックします。

これで解約は完了です。

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

エックスサーバーのキャンペーン情報

開催中のキャンペーン

2024年11〜12月のキャンペーン

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー

終了したキャンペーン

春のおトク割キャンペーン

キャンペーン概要	【3/24まで！ご利用料金の半額をキャッシュバック！】 　より長期のご契約ほどキャッシュバック金額がアップします！ キャッシュバック金額例 スタンダードプランを36ヶ月でご契約の場合《17,820円キャッシュバック！》 実質495円～使える！
対象	キャンペーン期間中、12ヶ月以上でエックスサーバーを契約した方（全プラン対象）
期間	2023年3月3日(金)12:00 ～ 2023年3月24日(金)12:00まで

春のおトク割キャンペーン

キャンペーン概要	【初回のご利用料金が最大通常の30%オフ】 ・【12ヶ月契約】20%OFF ・【24ヶ月契約】25%OFF ・【36ヶ月契約】30%OFF 例えば、スタンダードの12ヶ月契約なら月額880円（税込） 36ヶ月契約なら月額693円（税込）で利用可能
対象	キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
期間	2023年2月3日(金)12:00 ～ 2023年3月3日(金)12:00まで

独自ドメイン永久無料特典

概要	キャンペーン期間中に新規でXserverレンタルサーバーを12ヶ月以上ご契約いただきますと、利用料金が実質半額になります。
対象	キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
期間	2023年1月13日(金)12:00 ～ 2023年2月3日(金)12:00まで

えらべるキャンペーン

概要：対象サービスをご利用中の方、または期間中に新規ご契約される方を対象に抽選で豪華賞品をプレゼントいたします。

対象：キャンペーン期間終了時点で、対象サービスのアカウントをご契約中の方

※Xserverアカウントごとに1回ご応募が可能です。

・Xserverレンタルサーバー ・Xserverビジネス ・Xserverドライブ ・Xserverショップ ・Xserver VPS ※無料プラン・試用期間中や凍結中は対象外です。

期間：2022年12月26日(月)12:00 ～ 2023年2月2日(木)18:00まで

2024年10〜11月のキャンペーン

キャンペーン概要	初回のご利用料金が最大30%オフ！ ・【12ヶ月契約】20％オフ ・【24ヶ月契約】25％オフ ・【36ヶ月契約】30％オフ スタンダードプランの場合の契約期間ごとの月額利用料金は次のとおりです。 12ヵ月・・1,100円 → 880円 24ヵ月・・1,045円 → 783円 36ヵ月・・990円 → 693円
対象	キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
期間	2024年10月3日(木)17:00 ～ 2024年11月5日(火)17:00まで

＼ 12/4 17:00 まで1年以上契約すると利用料金の半額キャッシュバック！ ／

エックスサーバー