TechAcademy（テックアカデミー） Webデザインコース Webデザイン 事例から学ぶ！参考にしたいおしゃれなホームページ10選
icon
icon
Webデザイン

事例から学ぶ！参考にしたいおしゃれなホームページ10選

ホームページ作成をする上で参考になるおしゃれなサイトを紹介しています。ホームページ作成においてデザインは非常に重要です。色味や載せている情報もそれぞれのサイトで違うので、印象が大きく変わるはずです。ぜひ参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

今回はサイト作成する上で参考になるおしゃれなホームページを紹介します。

おしゃれなデザインは企業のホームページとして大きな影響を及ぼします。おしゃれなサイトを読み解いて、自分のホームページを充実させましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

トヨタ自動車

001

トヨタらしい白を基調としたデザインですね。高級感があります。

写真を横幅いっぱいに載せていて、スライドショーを使って限られたスペースの中で多くの情報を伝えていますね。

トヨタ自動車

 

釜飯と串焼きとりでん

002

商品の写真が全面に押し出されたサイトです。

おいしそうな写真を並べてありますね。

釜飯と串焼きとりでん

 

[PR] Webデザインで副業する学習方法を動画で公開中

自由が丘ロール屋

003

自由が丘ロールらしい、シンプルなサイト構築です。

自由が丘というおしゃれな街に最適ですね。

自由が丘ロール屋

 

NIKE

004

ナイキのイメージである白黒のページです。

かっこいい大人の雰囲気が出ています。

NIKE

 

千葉ロッテマリーンズ公式HP

005

プロ野球チームならではの情報の多さが目立ちます。

チームカラーも前面に押し出していますね。

千葉ロッテマリーンズ公式HP

 

Mercedes-Benz

006

ベンツのHPは高級感があります。

AやBと表示されているメニューバーはベンツの各モデルを表していますが、マウスオーバーするとそれぞれAクラスやBクラスの車種が写真で表示されます。

種類が多くなればなるほど、ホームページ内を読み込む回数が多くなりますが、こういった工夫は必要でしょう。

Mercedes-Benz

 

1時間でできる無料体験！

東京ディズニーランド公式HP

007

ディズニーはおしゃれですね。

写真を前面に出して、楽しさを演出しています。

東京ディズニーランド公式HP

 

RADWIMPS.jp

008

アーティストのRADWIMPSのページです。

アーティストらしいシンプルでおしゃれなデザインです。

RADWIMPS.jp

 

おうちでイオン

009

イオンらしい紫を基調とした色使いです。

イオンのテーマカラーが生きるサイトの配色ですね。見たら一瞬でイオンだとわかります。

おうちでイオン

 

君の名は。公式サイト

010

キービジュアルを前面に出したサイトです。

アニメーション映画だけあってコンセプトを大事にしていることが分かります。

君の名は。公式サイト

 

いかがでしょうか。

今年、大反響のサイトも紹介してみました。

どのサイトもおしゃれですが、何より、自分たちのカラーを崩さずにHPを作っています。ぜひ、参考にしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

Webデザイナーとは？必要なスキルや学習方法を細かく解説

この記事では、Webデザイナーとはどんな仕事をする人なのか、どんなスキルが必要なのか詳しく紹介しています。 これから在宅での仕事を考えている人や転職したい...
Webデザイン

直接予約を増やす！ホテルのWebサイトを作る上での5つのベストプラクティス

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXコンサルタントのArmen Ghazarian氏に...
Webデザイン

今さら聞けない！Webデザインとは【初心者向け】

Webデザインを学びたいという方は非常に多いと思います。今回は、Webデザインとは何か、Webデザインの勉強方法について初心者向けに解説していきたいと思います。...
Webデザイン

Webサイト制作にも便利！フリーの写真素材サイト10選【商用利用も可能】

Webサイトを制作しようと思った時に、「写真素材」がなくて困ったことはないでしょうか。 そんな方でもすぐに使える無料（フリー）の写真素材サイトをピックアッ...
Webデザイン

事例から学ぶ！マテリアルデザインとは【初心者向け】

シンプルな見た目なのにどこかリッチな印象を受ける、「マテリアルデザイン」 聞いたことはあるけど、誰かに説明できるほど詳しく分からないという方も多いのではな...
Webデザイン

【Webデザインの参考に！】海外のおしゃれサイトをまとめてみた！

日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。 そこで今...
Webデザイン

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] Webデザインで副業する学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。 垂直方向の文字が、水平方向の文字とアセンダ （アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。 可読性が重視されるテキストに最適です。   6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。 このフォントファミリーは51種類のウェイトから構成されています。 古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。   7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。 グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。   8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。 ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。   9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。 小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。   10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade
Webデザイン

【Webデザインの参考に！】海外のおしゃれサイトをまとめてみた！

日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。 そこで今回は、海外の洗練されたかっこいいサイトを紹介していきたいと思います。「このサイトおしゃれ！」と思ってもらうためにもデザインの参考にしてみてください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   WhiteRoom 流行りの動画背景をとりいれたサイトです。 動画サイトは注意をしないと情報が読み取りにくくなりますが、そういったことのないようにこのサイトでは配慮されています。 WhiteRoom   Pate Nottage 流行りのフラットデザインを取り入れた、こちらのサイト。 訪れてみると、アニメーションに凝っており、初めは動いて立体的なのに、止まると途端に平面になるなんともびっくりするサイトです。 Pate Nottage   [PR] Webデザインで副業する学習方法を動画で公開中norman また流行りだしているタポグラフィの概念を取り入れたサイトです。 スクロールしていっても、背景に文字という構図が繰り返されており、サイトに一貫性をもたせていることがわかります。 norman   nisgia.com 海外で最近流行っているアニメーションに凝ったサイトです。 音楽にもこだわっており10種類以上の音楽が使われています。 nisgia.com   KARIMUZARIFALA 自分の作品の情報をわかりやすくするためにできるだけシンプルにしてあるサイトです。 凝った作りはないものの、フォントが雰囲気にマッチしておりとても見やすいサイトになています。 KARIMUZARIFALA   SWFC 画面の横いっぱいに広がるデザインが主流の中、昔のホームページのような配置のサイトです。 しかし、フォント、色使いによってスタイリッシュな印象をもたせており、幅が狭いにもかかわらず、わかりやすいサイトとなっています。 SWFC   gerd arntz 真っ白な背景にシンプルなデザイン。デザインの原点に返ったようなサイトです。 このサイトに行くと、一瞬音が止まったような印象を受けます。凝ったサイトもおしゃれですが、こういったサイトもおしゃれですね。 gerd arntz   bjork 画像では分かりにくいですが、背景は3Dで出来ています。 背景を3Dなど凝ったものにしてしまうと、情報が伝わりにくくなってしまうことが多いのですが、色合いによってそれをうまくカバーしています。 bjork   今回は海外のおしゃれなサイトを紹介していきました。日本にも素晴らしいサイトはたくさんありますが、海外のサイトにもまた違った素晴らしさを感じます。 デザインの引き出しを増やすためにも是非一度ご覧になってみてはいかがでしょうか。 他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。おしゃれなサイトを作る力を身につけましょう！
Webデザイン

初心者におすすめ！無料・有料で使えるWordPressのテーマ35選【日本語対応のみ】

WordPressと言えば、豊富なテーマ（テンプレート）で知られています。 自分でコーディングをしなくても、テーマを使えばおしゃれなサイトに出来るのがWordPressの良いところですよね。 とはいえテーマの種類が多く、良いデザイン分からないという方もいるのではないでしょうか。 そこで、今回は無料で使えるテーマを厳選、一部おすすめの有料テーマをまとめましたので、ぜひ利用してみてください。   なお本記事で紹介しているテーマは、TechAcademyのWordPressオンラインブートキャンプでも一部を紹介しています。 また、テーマのインストール方法がわからない方は、WordPressのテーマインストール方法を解説した記事をご覧ください。   カテゴリー ポートフォリオ ブログ コーポレートサイト ECサイト パララックスサイト 有料テーマ   ポートフォリオ Portfolio ダウンロード/ DEMO 様々なサイズの写真がグリッドで表示されていますね。 凝った写真などをトップに表示させたい人にはおすすめのテーマでしょう。   onetone ダウンロード / DEMO 背景に動画を差し込めるテーマです。 スクリーンいっぱいに動画を表示させたい人はぜひこちらを利用してみてください。自分で撮った動画や社内風景など、動画にすることで映えるテーマなので、印象にもより残るはずです。   Espied ダウンロード / DEMO 同じサイズの画像がきれいに並んでいます。 グリッド形式で自分の作品やプロジェクトを紹介したい場合に使い勝手が良いと思います。デザイン的にもおしゃれなので、ビジュアルメインでポートフォリオを作成したい方におすすめです。   GK Portfolio ダウンロード / DEMO マテリアルデザインを利用していて各タイルが浮き上がって見えます。それ以外には基本的に何も表示されていないので設定も手軽に行えるはずです。 それぞれのコンテンツにタグ付けし分かりやすく見せることができるので、カテゴライズしやすいかと思います。 SNSの導線も見やすい位置に置くことが可能です。   Pictorico ダウンロード / DEMO トップには写真が並べられているテンプレートです。シングルカラムなので非常にシンプルに見えますし、自分が撮った写真などを載せるとより際立って見えるでしょう。 ファーストビューにはスライドショーが、スクロールすると画像が敷き詰められているデザインになっているので、一つ一つの写真もより印象的な見せ方ができるはずです。   他の記事では、ポートフォリオのテーマのみも紹介しているので、WordPressでポートフォリオサイトを作ってみたい人は、参考になるテーマが多いでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中ブログ Yuuta ダウンロード / DEMO ブログ内に記事や動画など色々なコンテンツを表示させたい人におすすめのテーマです。 白と黒が基調となっているデザインで、シンプルなので、とても見やすい作りになっています。レイアウトとしては海外っぽいテーマなので、外国人向けのブログなどには良いかもしれませんね。 Baskerville ダウンロード / DEMO 開いてすぐにカテゴリや記事が表示されるテンプレートなので、レイアウトよりもコンテンツを重視する人には良さそうです。 各記事にライタープロフィールを載せる欄も用意されているので、複数人で1つのブログを運営する、書いた人を表に出したいと思っている方には使いやすいでしょう。   Boardwalk ダウンロード / DEMO PCだと横スクロールする不思議なデザインを用いているテンプレートです。 スマホであれば普通に縦スクロールで見れるので、使いにくさは感じないかと思います。このテーマを使えば、横スクロールしていくので、見ているだけでも記憶に残るサイトになるでしょう。   Hueman ダウンロード / DEMO 左右にサイドバーが設置されていて、一度に多くの記事を表示させることができるテンプレートになっています。それでも散らかっている印象はなく、メニューバーで整理もできるので初めて訪れた人でも回遊しやすいサイトになるでしょう。 このテーマを利用している日本人もよく見かけるので、一般的なブログサイトとして使いやすいのでしょう。   Riba Lite ダウンロード / DEMO トップページは、写真がグリッドで表示されていてインパクトは大きいでしょう。スマートフォンで見ると縦に写真が並ぶので、とても今風なデザインになります。 「ブログコンテンツも写真もおしゃれに見せたい」という方は使ってみると良いでしょう。   Bulan ダウンロード / DEMO トップの背景に大きく写真を見せるテンプレートです。質の高い写真を入れておけば、自分でブログを見るのも楽しみになるはずです。 ベージュを基調としたレイアウトになっているので、柔らかい印象で女性に人気です。   MH Purity Lite ダウンロード / DEMO 様々なスタイルで見せることが特徴のテンプレートでしょう。 メインにも2カラムあり、かつサイドバーもあるので記事を表示させる部分が多くあります。自分の好きな見せ方に合わせてカスタマイズすることができます。 別の記事では、WordPressでブログサイトを作る手順も解説しているので、これからブログを作りたいと考えている人は、ぜひ参考にしてみてください。   コーポレートサイト Sydney ダウンロード / DEMO 今風なコーポレートサイトを作りたいのであれば、十分でしょう。 かなり多くの情報も表示させることができそうです。「シンプルなサイトを作りたい人」も「より細かい情報まで伝えたい人」も自由にカスタマイズできるので、様々なケースで活用できるはずです。   Zerif Lite ダウンロード / DEMO 海外のコーポレートサイトでよく見るようなデザインになっています。 パララックスを表現できたりもするので、完成度の高いサイトにすることも可能です。 コーポレートサイト以外でも、Eコマース機能も設定できるので、ECサイトにもカスタマイズすることができます。自由に目的に応じて利用してみてください。   Business ダウンロード / DEMO 水色を基調としてるテーマです。 背景のスライドショーはスクリーンいっぱいに切り替わるので、サイトの印象は強く残るでしょう。 PCでもスマホでもアニメーションのインパクトが強いので、より動きを出したい人には良いかと思います。   West ダウンロード / DEMO hoverを効かせたり、カスタマイズ性に富んだテーマになっています。 簡単なブログ機能も付随されているので、自社ブログを書いている会社にも合っているテーマでしょう。過去のプロジェクトや社内メンバーなどを大きく見せたい場合におすすめです。   EDIN ダウンロード / DEMO 明日にでも公開したいということであれば、ぜひこのテーマを。 多く情報を載せる必要もないので、すぐに自分のサイトにできそうです。シンプルなコーポレートサイトを作りたい方におすすめです。   Astrid ダウンロード / DEMO スマートフォンにも綺麗に対応しているテンプレートです。 会社の印象が一気にかっこよくなるはずです。フォントも他のサイトでは見ないような形なので、デザイン制作会社などに合うでしょう。   Pinnacle ダウンロード / DEMO 表示している情報はそこまで多くないですが、会社のブログやサービスを簡単に紹介できるテンプレートです。 シンプルなWebサイトを作るのに向いています。   コーポレートサイトのテーマのみも紹介しています。   ECサイト Fukasawa ダウンロード / DEMO 白を基調としているので、洋風な雰囲気が伝わってきます。 商品やサービスのブランディングもしやすいと思うので、また見に来たいと思わせるデザインにできるでしょう。   Storefront ダウンロード / DEMO 余計なものが一切なく、非常にシンプルなデザインです。 ファーストビューに動画を設置できるので、商品の使用シーンも紹介できるでしょう。   VIRTUE ダウンロード / DEMO ECサイトとしてもブログとしても利用できそうなデザインとなっています。 普段はブログを書きながら、たまに自分で作ったものを販売するような人には使い勝手が良さそうですね。   PANTHEA ダウンロード / DEMO このテーマを使えば、スライドショーでセール情報などを表示させて目立たせることができるでしょう。 キャンペーンをいろいろ行っている会社などは、同時にスライドショーで表示させることができるので、使い勝手が良いでしょう。   Dazzling ダウンロード / DEMO 「ギャラリー」なんていうカテゴリもあるので、カメラマンなどにはぴったりのテーマです。 実際の物ではなく、オンラインのサービスやソフトを販売したい方に良さそうです。   Auberge ダウンロード / DEMO カフェやレストランなど自分の店舗のサイトを作るのに向いているテンプレートです。こういったサイトを持っているカフェがあれば、集客にも役立つでしょう。 「新メニュー出しました」というリリースも見やすいデザインになっています。   他の記事では、ECサイトのテーマのみも紹介しているので、ぜひ参考にしてみてください。   パララックスサイト MOESIA ダウンロード / DEMO 何度でもスクロールしたくなるような動きを表現することができます。 コーポレートサイトとしても、サービスのLPとしても間違いなく印象に残るでしょう。   Parallax One ダウンロード / DEMO 背景画像がマウスの動きに合わせて動くという、初めて見る人からしたらちょっと不思議なサイトです。   ONEENGINE ダウンロード / DEMO スライドショーやパララックスな動きだけでなく、多くの情報も一つのページに載せることができます。 「ユーザーが何人います」といった数字で表すものもグラフとアニメーションを使って視覚的に表示できるので、より洗練されたWebサイトの印象を与えることができるでしょう。   Aldehyde ダウンロード / DEMO 画像の上にスライドショーで画像が表示されるインパクト重視のテーマとなっています。 画像の占める割合が大きいので、写真にこだわってる人には自分で見ていても楽しいでしょう。   PIXOVA LITE ダウンロード / DEMO スクロールに合わせて横からスライドして表示されたり、下から浮き上がってきたりと動きが多くあるテンプレートです。 自分で見ていても何度もリロードして見たくなりますね。   有料テーマ 以下では、有料なもののカスタマイズに優れており、デザインクオリティの高いテーマを紹介していきます。 賢威 料金：24,800円 SEOで多くの実績を持つウェブライダーが開発しているWordPressのテーマです。 様々な企業のメディアを運営してきた実績を元に作成されたテンプレートで、SEOに強いサイトを作りたい方におすすめです。 安くない金額と感じるかもしれませんが、SEOに関するマニュアルもセットになって販売されているので、本格的にWebサイトを運営する際には必要になるはずです。   アルバトロス 料金：7,980円 ブログサイトとして3種類のテーマを運営しているオープンケージですが、一番オーソドックスなテーマです。 レイアウトも自分でカスタマイズすることができ、気軽に記事も投稿できるので、初めてサイトを作る人に愛用されています。 全くスキルがない人でも手軽に扱えるテーマなので、ぜひ試してみてください。 アルバトロスのテーマへ   ストーク 料金：10,800円 最近のブロガーの多くが利用しているWordPressのテーマです。 デザイン面、機能面を考えるとこの料金でも非常に安く感じますね。ソーシャルボタンやリンクのボタンなど、すでに用意されているデザインの質が高いので、満足度が非常に高いです。 いろんなブロガーもおすすめしている人気のテーマなので、ぜひ使ってみてください。   Emanon 料金：9,800円/12,800円 ブログサイトやコーポレートサイトを作成する上で役に立つテンプレートが販売されています。 レスポンシブデザインでスマホ上でも見やすく、CTAやランディングページも自由に設定・カスタマイズできるのが特徴です。 デザイン面も直感的に編集することができるので、初心者でも本格的なWebサイトを作ることができます。   LIQUID PRESS ブログやオウンドメディア用、ギャラリーサイト用、コーポレートサイト用のテーマを用意しているサイトです。 モノによって金額が分かれますが、どれもレスポンシブ対応しており初めてWebサイトを作る人でも本格的な出来栄えになるでしょう。 日本語対応もしているので、サポートも安心でしょう。 LIQUID PRESSのテーマへ SWALLOW（スワロー） 料金：9,900円 プロブロガー八木仁平監修のもと、OPENCAGEが開発したWordPressテーマです。 SWALLOW（スワロー）のテーマへ   OOPS! 料金：19,800円 ランディングぺージのコンバージョン率を高め、コンテンツマーケティングの効果を最大限に発揮するために開発されたテーマです。 OOPS!（オープス!）のテーマへ /　Demo   DIVER（ダイバー） 料金：17,980円 アフィリエイトに最適化された、SEO対策、サイト回遊率、離脱率、アフィ収益等の対策を行うことができるWordpressテーマです。 DIVER（ダイバー）のテーマへ / Demo   PRECIOUS（プレシオス） 料金：9,980円 スタイリッシュな企業＆ECサイト向けヨーロッパ調の近代的なデザインテーマです。 PRECIOUS（プレシオス）のテーマへ /
WordPress

知識不要！初心者でも作れるホームページ作成ツール10選

今回は誰でも簡単に使えるホームページ作成ツールをまとめて紹介します。 最近では無料でかつおしゃれなホームページを作ることが可能になってきています。 難しい知識は必要ないので、初心者の方でも安心して使えるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     田島悠介 今回は、プログラミングに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ホームページ作成ツール10選について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ホームページ制作をする時の注意点 WordPress Dreamweaver ホームページビルダー Jimdo Wix Webnode FC2 SITE MIX Ameba Ownd Cloud Line   ホームページ制作をする時の注意点 ホームページを作成する上ではいくつかの注意点があります。 まずはこちらを頭に入れましょう。   ファイルサイズの大きい画像や動画を多様しない 初心者が一番行ってしまうミスです。 現代のスマートフォンやデジカメで撮影した写真はそのままでは解像度が高すぎて、ファイルサイズも数十MBとホームページに表示するには大きなものになります。 写真を表示するのであればサイズを縮小したり、減色処理を行うなどしてファイルサイズを大きくても数百KB程度に収めるようにしましょう。 一般的にWebサイトが表示されるまで利用者が待てる時間は３秒以内と言われています。軽量なホームページを心がけることは第一の基本です。   著作権に注意する 他の人が作ったホームページや写真、動画などには著作権があります。 了解なく引用したり、コピーすることは法律で禁じられており、罰則も存在します。 他の人の著作物を安易にコピーなどすることは絶対に行わないようにしましょう。 なお、著作権が放棄された素材を探す場合は「Public domain images」などのキーワードで検索するのがおすすめです。 Public Domain（パブリックドメイン）は知的財産権が発生していない、または消滅した状態である知的創作物を指し、自由にだれでも利用できるものです。   フィードバックをもらう ホームページを作りたいと思ったら、まずは作って公開することです。 その際、友人や知人からフィードバックをもらうようにしましょう。 完璧な完成形を目指すといつまで経っても終りが見えません。ある程度期間を決めて作成したらフィードバックをもらう、それを繰り返すことで、知見が深まり、よりよいホームページを作成できるようになります。 あまり考えずに、まずは始めましょう！   [PR] Webデザインで副業する学習方法を動画で公開中WordPress WordPressはオープンソースのWebサイトやブログを構築するソフトウェアです。 全世界で広く利用されており、開発も盛んに行われています。 見た目を簡単に変えることができるテンプレートや、機能を拡張するプラグインなど、カスタマイズ機能も充実しています。 ホームページを作成するのであれば、最初に検討すると良いでしょう。 WordPress   Dreamweaver   有名なAdobeのソフトウェアでプロ仕様ですが、初心者でもコーディングが可能です。 プレビュー機能や、レスポンシブウェブなどもビジュアルでの配置が簡単です。しかしながら、WordPressと同じでカスタマイズには知識が必要となります。 1から書くこともでき、サンプルから広げることもできます。初級者から上級者まで幅広く対応できるツールと言えるでしょう。 Dreamweaver   ホームページビルダー   とても歴史のあるホームページ作成ソフトです。利用したことのある方も多いでしょう。 HTML、CSSの知識が無くても簡単にレスポンシブウェブまで作れるといった特徴があります。何も勉強したくないけど、とりあえずといった時にはホームページビルダーがお勧めです。 最初はホームページビルダーといった感じですが、この先にDreamweaverやWordPressがあります。HTMLのコーディングやJavaScriptをいじるなら、WordPressやDreamweaverがいいでしょう。 とりあえず、作るだけならホームページビルダーでもいいかもしれません。 ホームページビルダー   ここからはホームページの開設までセットになっているものを紹介します。   Jimdo 無料プランでもホームページを作成でき、有料プランではさらに多くの機能を利用できます。無料版でも十分ホームページの作成はできるので、まずは無料で試してみると良いでしょう。 Jimdo   Wix   上記のサイトと同じですが、スマホページに強いという印象があります。 テンプレートも豊富に揃っているので、初心者の方でもすぐおしゃれなホームページが作成できるはずです。 Wix   Webnode   プロ仕様のテンプレートがそろっているイメージですね。 ネットショップも始めることができます。 Webnode   FC2   言わずと知れたサイトだと思います。老舗のサイトならではの安心感がウリですね。無料でかつ広告なしのホームページを作ることもできるので、ぜひ役立ててみてください。 FC2   SITE MIX   レンタルサーバータイプのサイトになります。 Webでアプリケーションを作りたい人なんかにはもってこいのサイトですね。 SITE MIX   Ameba Ownd   AmebaTVグループなので安心ですね。 ブログやネットショップなども作成することができます。 Ameba Ownd   Cloud Line   簡単におしゃれなページが作成できそうですね。 文章だけでなく写真も目立たせたいという人には使い勝手が良いでしょう。 Cloud Line     いかがだったでしょうか。 いろいろなツールがありますので、いろいろ試してみるのもいいでしょう。 誰でも簡単に利用できるツールなので、ぜひ活用してみてください。十分おしゃれなホームページが作れるはずです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でも12週間で東京のIT企業へエンジニアとして転職を目指せるオンラインブートキャンプを開催しています。 現役エンジニアとキャリアカウンセラーが学習から転職までサポートいたします。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
Webデザイン

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。 他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。 そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？ 田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。 大石ゆかり なんだか難しそうですね・・・。 田島悠介 きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。 大石ゆかり よろしくお願いします！！！   目次 WordPressのインストール手順 初期設定とインストール WordPress管理画面の基本設定 記事の投稿方法 カテゴリーとタグの管理 ユーザー管理 パーマリンクの設定 テーマの使い方 プラグインの使い方 WordPressで知っておきたいその他の設定   WordPressのインストール手順 用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上 または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。   本体の入手とサーバーへのアップロード まずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード 以下のボタンをクリックしてWordPress本体をダウンロードします。 ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。 アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。   [PR] Webデザインで副業する学習方法を動画で公開中初期設定とインストール データベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。 データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。 以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。 また、データベースの文字コードは「UTF-8」にしておきます。 「インストールを実行」をクリックします。 ここではWordPressサイトの基本的な設定を行います。 また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。 テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。 インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。 続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。   管理画面の基本設定 ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。   サイトの基本情報変更 左メニューの「外観」から「カスタマイズ」を選択します。 「サイト基本情報」を選択します。 サイトのタイトルとキャッチフレーズはここからいつでも変更できます。   ログイン・ログアウト方法 管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。 再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。   記事の投稿 左メニューの「投稿」から「新規追加」を選択します。 「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。 なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。 この記事でもブロックエディターの説明を行っています。 また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。 入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。     予約投稿の方法 「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。 公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。 カレンダーが表示され、日時を自由に決めることができます。 トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。 今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。 設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。   カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。 新規カテゴリーの作成方法 ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。 名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。 スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。 未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。 また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。   新規タグの作成方法 ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。 タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。   ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。 管理画面のユーザーをクリックすると、新規登録・編集画面になります。 権限グループごとに何ができるのか 新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。 購読者 WordPressにログインすることが可能。プロフィールの変更が出来る 寄稿者 記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません 投稿者 記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない 編集者 他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない 管理者  全ての権限がある となっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。 投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。 編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。   新規ユーザーの登録方法 管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。   必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。 権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。   ユーザーの削除方法 管理者の権限を持つユーザーでログインすると、削除することが出来ます。   パーマリンクの設定 パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。 ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。 中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。 この部分をある程度自由に変更することが出来ます。   パーマリンクの変更 パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。 デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。 基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。 月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。 投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。   パーマリンクのカスタム構造 パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。 カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。 ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？ どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。   テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。 個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。   テーマの変更方法 左メニューの「外観」から「テーマ」を選択します。   インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。   テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。   テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。   テーマの例 「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。   おすすめのテーマ 各シチュエーションで使えるWordPressのテーマを紹介します。 国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。 以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。 ブログサイト アルバトロス かなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。 有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。 カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。 アルバトロス   賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。 サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。 賢威   Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。 ダウンロード / DEMO   Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。 個人のブログサイトとしても活用できるので、ぜひ活用してみてください。 ダウンロード / DEMO   ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。 様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。 ダウンロード / DEMO   YITH Proteo ファッションやアパレル系のECサイトにおすすめです。 カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。 スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。 ダウンロード / DEMO   Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。 ブランディングとしての見せ方としても使えるのでおすすめです！ ダウンロード / DEMO   コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。 また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。 ダウンロード / DEMO   Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。 トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。 ダウンロード / DEMO   他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。   プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。 アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。   プラグインの検索とインストール 左メニューの「プラグイン」から「新規追加」を選択します。   テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。 インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。   プラグインの有効化 左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。   インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。   プラグインの例 SNSボタンのプラグイン 「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。 利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。   記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方   WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos   SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方   Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google
WordPress

HTMLの折りたたみメニューを有効活用する方法を現役エンジニアが解説【初心者向け】

折りたためるメニュー、通称アコーディオンメニューはWebページに必須のパーツです。 おしゃれなメニューを効果的に活用したいですよね。 アコーディオンメニューの作り方がよくわからない、うまく作れないという方に、この記事ではHTMLでアコーディオンメニューを作り、有効活用する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次トヨタ自動車釜飯と串焼きとりでん自由が丘ロール屋NIKE千葉ロッテマリーンズ公式HPMercedes-Benz東京ディズニーランド公式HPRADWIMPS.jpおうちでイオン君の名は。公式サイト そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLと折りたたみメニュー（アコーディオンメニュー）について詳しく説明していくね！ 大石ゆかり お願いします！   HTML5でアコーディオンメニューを作る方法 HTML5では、detailsタグとsummaryタグを使って、アコーディオンメニューを簡単に作ることができます。 See the Pen Accordion by TAKAYOSHI (@lspuwbkv) on CodePen. 2010年代は、inputタグとCSS3アニメでアコーディオンメニューを作っていました。 まず、inputタグのチェックボックスを透明にし、onとoffを切り替えるスイッチを作成します。 そのonとoffをCSSでセレクトし、アニメで切り替えていく手法です。 見えないinputタグを複雑に活用するため、難しいテクニックでした。   しかし現在、HTML5のdetailsタグとsummaryタグを使って簡単に作れるようになりました。 2021年10月現在、Chrome、Edge、FireFox、Safariがdetailsとsummaryをサポート (Can I Use)。 IEではサポートされていませんので注意してくださいね。   それでは詳しく解説していきます。   detailsタグとsummaryタグ detailsタグとsummaryタグは折りたたみ要素、つまりアコーディオンメニューを作るためのタグです。   <details>タグの中に<summary>タグで囲った常に見える要素と、折りたたむ要素を並べて記述してください。 See the Pen detail by TAKAYOSHI (@lspuwbkv) on CodePen.   これだけで、シンプルなアコーディオンメニューとして表示されます。 detailsタグやsummaryタグをCSSで装飾すると、おしゃれなアコーディオンメニューになるんですね。 See the Pen detail 2 by TAKAYOSHI (@lspuwbkv) on CodePen.   アコーディオンの折りたたみ状態に応じたCSS アコーディオンを開く閉じるに応じて、デザインを変えたいことがあります。 その時は、detailsタグの[open]セレクタで、開いた状態をセレクトしましょう。 details[open] {      /* アコーディオンが開いている状態のCSS */  }   summaryなどの子要素を装飾したい場合は、子孫セレクタでつなげます。 details[open]  summary{      /* アコーディオンが開いている状態のCSS */  }   このテクニックを使って、開閉するとメニューの色が変わるようにしたサンプルです。 See the Pen detail 3 by TAKAYOSHI (@lspuwbkv) on CodePen.   CSSアニメーションでアコーディオン 次に、開閉によるデザインの違いをアニメーションにしていきましょう。 変化に時間をかけることで、アニメーションを表現するtransitionプロパティを使います。 details summary{     /* 変化に0.5秒かけるアニメーション*/      transition:  0.5s;  }   すると、デザインの変化が滑らかにアニメーションします。 See the Pen
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン 事例から学ぶ！参考にしたいおしゃれなホームページ10選