WordPress

WordPressで使えるポートフォリオサイトのおすすめテーマ10選

WordPressで使えるポートフォリオサイト用のテーマを紹介。初心者でも使えるおすすめのテンプレートをまとめています。自分の実績を示すようなオリジナルのポートフォリオサイトを作ってみましょう。

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

最近はフリーランスとして働く人が増えてきています。

とはいえ、フリーで働くためには自分の実績を示すようなポートフォリオが必要になってきますよね。

今回はそんなポートフォリオサイトを作成するのに便利なテーマを紹介していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

また、テーマのインストール方法がわからない方は、WordPressのテーマインストール方法を解説した記事をご覧ください。

1. Portfolio

スクリーンショット 2016-02-09 17.13.45

ダウンロード/ DEMO

自分の撮った写真や執筆した記事など、一つのポートフォリオとして作成するには十分すぎるテーマです。

PCで見ても、スマホで見てもおしゃれに見えるのが特徴的ですね。

2. Electric

スクリーンショット 2016-02-09 17.14.22

ダウンロード / DEMO

載せたい作品がたくさんある人にはおすすめのポートフォリオテーマでしょう。

色々なカテゴリに分けてソートすることができ、読み込みも必要ないので、多くの作品を見せることが可能です。

[PR] WordPressで挫折しない学習方法を動画で公開中

3. ePix

スクリーンショット 2016-02-09 17.12.21

ダウンロード / DEMO

このテーマの凄いところは、レイアウトの種類が多く用意されているところです。

自分の載せたい情報に合わせて、スライドショーにしたり、画像をグリッドで表示したりとあらゆるレイアウトに対応できるのです。

このポートフォリオに慣れてしまえば今後ずっと使えるでしょう。

4. RokoPhoto

スクリーンショット 2016-02-09 17.11.41

ダウンロード / DEMO

自分で撮った写真をスクリーンいっぱいにスライドショーで映すことができます。

広角レンズを使った写真などもとてもキレイに見えるでしょう。写真家のポートフォリオとして良い見栄えにできそうですね。

5. Alona

スクリーンショット 2016-02-09 17.11.03

ダウンロード / DEMO

左側のサイドバーに自分に関する情報を載せられるので、いちいちスクロールせずに見ることができます。

PCで見せたい人などは、長い時間見てもらえそうなテーマとなっています。

6. Ananke

スクリーンショット 2016-02-09 17.10.36

ダウンロード / DEMO

ページを読み込むと最初に自分のSNSを表示できるので、自分のSNSに飛んできてほしい人には相性が良いテーマとなりそうです。

GithubアカウントのContributionsなどが充実している人は、良いアピールにできそう。ぜひ個人のブランディングとして役立ててみてください。

7. onetone

スクリーンショット 2016-01-27 16.01.14

ダウンロード / DEMO

背景に動画を差し込めるようになっているので、自分で撮った動画などを入れると一気にカッコよく見えます！

ダンサーなど自分のパフォーマンスをスクリーンいっぱいに見せている人もいるので、印象には残るでしょう。

8. Onesie

スクリーンショット 2016-02-09 17.09.48

ダウンロード / DEMO

非常にシンプルな作りですが、視差効果があることでおしゃれに見えるでしょう。

特に難しい設定とかもないので、初心者でも手軽に作成できるのが特徴です。

9. Espied

スクリーンショット 2016-01-27 16.06.56

ダウンロード / DEMO

フラットデザインな素材が敷き詰められています。アイコンやロゴの作成実績をポートフォリオとして見せるのに向いています。

加えて、自分で作っているスマホのUIデザインなどを紹介するには良さそうです。

10. Oshine

スクリーンショット 2016-02-09 17.09.27

ダウンロード / DEMO

このテーマは非常に幅広く利用できるテーマです。

実際には、ブログを載せたり、ネットショップとしても利用できるので単純にポートフォリオだけでなく、自分の作品を販売することも可能です。

機能が豊富なので、使い慣れるまで大変かもしれませんが、これ一つで満足できるのは間違いないでしょう。

ポートフォリオサイトの良いところは、自分が応募した時に活躍するのはもちろん、サイトとして存在していれば「この人に仕事をお願いしたい！」と思う人が増えるところです。

ぜひ、自分だけのポートフォリオサイトを作って、注目を浴びましょう！

もっといろんなテーマを見てみたいという方は、無料で使えるWordPressのテーマ30選も合わせてご覧ください。

ぜひ、WordPressの使い方を覚えましょう！

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。ぜひオシャレなポートフォリオサイトを作成しましょう！

初心者におすすめ！無料で使えるWordPressのプラグイン10選

WordPressでサイトを開設している多くの方がプラグインを使っています。 WordPressは初心者でも簡単にウェブサイトを作れるのはもちろんですが、...

WordPress

WordPressでカスタムヘッダーを設定する方法【初心者向け】

WordPressでテーマによってはヘッダーに画像を設定できます。サイトのヘッダー画像は、そのページの印象を決める大切な部分ですので、印象的な画像を配置...

WordPress

WordPressのサイトを別のサーバーに移行する方法【初心者向け】

WordPressでは、別サーバ間でも記事内容やアップロードしたメディアファイルなどのデータを、まるごと移行させることが可能です。ここでは、他のサーバに...

WordPress

すぐに使える！WordPressの簡単インストールが使える国内のレンタルサーバー5選

ますますCMSとして使われることが多くなっているWordPressですが、簡単インストールという便利な機能があります。簡単インストールを使うと、FTPソ...

WordPress

WordPressでファビコンを表示させる方法【初心者向け】

ブラウザ上のタブや、お気に入り一覧で表示されるそのサイトのアイコンを「ファビコン（favicon）」といいます。テックアカデミーマガジンのファビコンはこ...

WordPress

プラグインで簡単導入！WordPressでメルマガを発行できるプラグイン5選

メールマガジンを使ったマーケティング手法は今も有効な手段です。そんなメルマガをWordPress上から発行できるプラグインがあります。ゼロからメルマガ配...

WordPress

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

【初心者必見！】Webデザイナーが持っておくべき「ポートフォリオ」とは

Webデザイナーとして就職・転職する上で欠かせないのがポートフォリオ。この記事では、事例も紹介しながらポートフォリオとは一体なんなのか分かりやすく解説しています。 Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。 Webデザイナーに必須のポートフォリオとは Webデザインを仕事にしている人は増えてきて、インターネットを使った仕事の受注や就職においてもその競争率は高くなってきています。そのとき重要になるのがアピールの方法です。 Webデザイナーの場合ポートフォリオという形で、自分の実績やスキルを相手に示すことができます。ロゴやバナー、Webサイトのデザインなど今まで作ってきたものをポートフォリオにまとめておけば、何を作ってきたのか一目で理解できます。転職のしやすさにも良い影響を与えますし、フリーランスとして働く上では必ずと言っていいほど持つべきでしょう。ポートフォリオの作り方ポートフォリオは内容を詳細まで決められているものではありませんが、ある程度基本となる情報は載せておく必要があります。まず、作ったWebサイトのタイトルとURL、スクリーンショットです。スクリーンショットがなければ文字での紹介となり意味がなくなってしまいます。また、制作にかかった時間や、自己紹介もまとめておくことで面接時の質問を誘導することにも一役買います。印象に残るようなデザインにすることは大切ですが、統一性を失ってはかえってごちゃごちゃとした印象になってしまうため見やすさを意識することも忘れてはいけません。 WordPressで使えるポートフォリオ用テーマも紹介しているので、手軽に作ることも可能です。 [PR] WordPressで挫折しない学習方法を動画で公開中イケてるポートフォリオの事例ポートフォリオを始めて制作する場合には特に、他人のポートフォリオを参考にすることでイメージが掴めるようになります。 Webデザイナーの成果物の居場所はすべてインターネット上にあるため、検索すればすぐに見つけることができます。ここでは、その中でも著名人の作ったポートフォリオの事例を紹介します。 Mana ManaさんはWebデザイン界でも有名でポートフォリオの参考事例としてよく紹介されています。わかりやすさが特徴のデザインとなっています。ポートフォリオフクシマナオキこちらは1ページにすべてを収めた構成が特徴的なポートフォリオです。ページを新たに読み込むことなくスクロールのみで見ることができ、ストレスのない見せ方ができています。ポートフォリオ Jojodesign このポートフォリオは円を基調としたデザインとなっていて、滑らかに動く背景が印象的です。ポートフォリオ Shogo Tabuchi 音楽やアニメーションが多く活用され面白みのあるポートフォリオです。動きを多く表現したいという方は参考になるはずです。ポートフォリオ秦頌光クールさのあるポートフォリオで、2DのWebサイト上で立体を意識した見せ方をしているのが特徴です。各画面をスライドショーのように見せているのが印象的ですね。ポートフォリオ OH｜割石裕太わりえもんさんこと割石さんのポートフォリオ。フリマアプリFrilなどのデザインをしてきた実績が紹介されています。ポートフォリオタカヤオオタ MERYのロゴやデザインを手がけた人として有名な方のポートフォリオです。自分が関わったプロジェクトが見やすく並べられていて、作ったロゴなどが一目で分かるようになっています。ポートフォリオ以上、ポートフォリオとは何なのか、何を載せるものなのか説明しました。実際のポートフォリオも参考にしながら自分が作った作品を載せるポートフォリオを作ってみてください。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを作ることが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

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

WordPressと言えば、豊富なテーマ（テンプレート）で知られています。自分でコーディングをしなくても、テーマを使えばおしゃれなサイトに出来るのがWordPressの良いところですよね。とはいえテーマの種類が多く、良いデザイン分からないという方もいるのではないでしょうか。そこで、今回は無料で使えるテーマを厳選、一部おすすめの有料テーマをまとめましたので、ぜひ利用してみてください。なお本記事で紹介しているテーマは、TechAcademyのWordPressオンラインブートキャンプでも一部を紹介しています。また、テーマのインストール方法がわからない方は、WordPressのテーマインストール方法を解説した記事をご覧ください。カテゴリーポートフォリオブログコーポレートサイト ECサイトパララックスサイト有料テーマポートフォリオ Portfolio ダウンロード/ DEMO 様々なサイズの写真がグリッドで表示されていますね。凝った写真などをトップに表示させたい人にはおすすめのテーマでしょう。 onetone ダウンロード / DEMO 背景に動画を差し込めるテーマです。スクリーンいっぱいに動画を表示させたい人はぜひこちらを利用してみてください。自分で撮った動画や社内風景など、動画にすることで映えるテーマなので、印象にもより残るはずです。 Espied ダウンロード / DEMO 同じサイズの画像がきれいに並んでいます。グリッド形式で自分の作品やプロジェクトを紹介したい場合に使い勝手が良いと思います。デザイン的にもおしゃれなので、ビジュアルメインでポートフォリオを作成したい方におすすめです。 GK Portfolio ダウンロード / DEMO マテリアルデザインを利用していて各タイルが浮き上がって見えます。それ以外には基本的に何も表示されていないので設定も手軽に行えるはずです。それぞれのコンテンツにタグ付けし分かりやすく見せることができるので、カテゴライズしやすいかと思います。 SNSの導線も見やすい位置に置くことが可能です。 Pictorico ダウンロード / DEMO トップには写真が並べられているテンプレートです。シングルカラムなので非常にシンプルに見えますし、自分が撮った写真などを載せるとより際立って見えるでしょう。ファーストビューにはスライドショーが、スクロールすると画像が敷き詰められているデザインになっているので、一つ一つの写真もより印象的な見せ方ができるはずです。他の記事では、ポートフォリオのテーマのみも紹介しているので、WordPressでポートフォリオサイトを作ってみたい人は、参考になるテーマが多いでしょう。 [PR] WordPressで挫折しない学習方法を動画で公開中ブログ 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

【完全保存版！】デザインを参考にすべき海外のポートフォリオサイト25選

本稿は、Webdesigner Depotのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。またこの記事は、Ezequiel Bruni氏によって、投稿されました。ご紹介するのは、ミニマリストデザインのサイト、伝統的なデザインのサイト、アシンメントリーなデザインのサイト、実用的ではないけれど実験的でクールなデザインを大胆に試みているサイトです。今までには到底不可能だと思われたデザインを見ることができます。視差効果(パララックス)を利用して、良い意味で撹乱を引き起こしているデザインもあります！ pixelindustry pixelindustryのポートフォリオは各テーマごとに作成されています。だから、厳密には世界初のオリジナルデザインではないかもしれませんが、ポートフォリオが彼ら独自の強みや才能を示すために役立っていることは、確かです。もっとも、「テーマのある」ポートフォリオが良い方向に評価されるときにだけ効果的なのかもしれませんが。 pixelindustry David Alexander David Alexanderのポートフォリオは、広くてゆったりとしていて、画像をメインとしたフレンドリーな印象のフルスクリーンのレイアウトが特徴です。もしあなたのコンテンツが、テキストが少なめで画像を多用しているとしたら、参考にできる手法です。 David Alexander [PR] WordPressで挫折しない学習方法を動画で公開中Martine aimait les films ビデオ制作会社のMartine aimait les films(フランス語で「マルタンはフィルムを愛する」の意)のポートフォリオサイトは、２分割法のようなデザインが素晴らしいです。ビデオの背景として使われているシンプルでクオリティの高いクリップとの相乗効果で、サイト全体は現代的でプロフェッショナルな雰囲気に仕上がっています。紹介する動画のスタイルとよく合っています。 Martine aimait les films Aycan Elijah Yilmaz 私が「銀河で表現されたあご髭」を見たのは、このAycan Elijah Yilmazのポートフォリオが2回目でした。この「銀河で表現されたあご髭」はさておき、ミニマリストデザインには大変参考になる良いサイトです。 Aycan Elijah Yilmaz Chris Cook Chris Cookのポートフォリオは、シンプルで、モノトーンを基調としていて、美しいタイポグラフィでデザインされています。私が特に好きなことろは、背景のパターンが微かなトーンで使われている点です。背景のパターンは、現代では時代遅れのデザインとして否定される傾向にありますが、このサイトは上手く取り入れています。 Chris Cook whitelist ビデオ制作スタジオのwhitelistのポートフォリオは、90年代スタイルのマルチメディアのプレゼンテーションを基本としながら、現代的なテクノロジーと手法が使われています。このような種類のデザインによくあるユーザビリティの問題には、私も批判的な立場ですが、良くないデザインというわけではありません。余分な装飾の多いファンシーなJavaScriptやアニメーションを削ぎ落とした後に残るのは、美しいミニマリストデザインのサイトです。装飾のため、またUIエレメントや重要なコンテンツに注目を集めるために、珍しい幾何学の図形を使う手法が私は特に好きです。 whitelist 4musketier 4musketierはデザイン代理業の会社と思われます（私はドイツ語が読めないのであくまで推測ですが）。それほど想像力に富んだデザインではありません。模範的なフラットデザインであり、特定のカラースキームというよりも、色とりどりのパステルカラーの虹色を使ったようなデザインとして参考になります。素晴らしいタイポグラフィ、贅沢に使われているホワイトスペース（余白）などが良い効果をもたらしているデザインです。デザイン全体を通して高い精度があり、一見の価値があります。 4musketier Lachlan Kincaid Lachlan Kincaidのポートフォリオは、文字通りの意味の「ホワイトスペース（余白）」によって、ミニマリズムの世界を私たちに見せてくれます。シンプルなデザインのサイトで、紹介する全ての作品に、適切なコンテクストを与えるために、テキストと画像が強調されています。高く評価できる試みです。 Lachlan Kincaid Electric Enjin Electric Enjinのポートフォリオサイトは、ズームイン効果のある3Dの多面球体の登場から始まることで、衝撃的な印象を与えてくれます。これより先は、実際に見てのお楽しみとしてもらいたいので、話すのを控えます。潜在的なユーザビリティの問題を別とすれば、これこそデザイナーがFlashを利用したサイトに追求し、その実現が難しいデザインであると表現すれば十分かもしれません。サイトの他の部分のデザインは明らかにもっとシンプルです。壮観であり過ぎず、それでいて見ていて楽しいデザインです。トップページは訪問者に何かしら考えさせるところがあるデザインです(ブラウザ上で作動すれば)。 Electric Enjin Olle Olleのポートフォリオサイトは、ミニマリズムデザインと一連のバウハウス（Bauhaus）のデザイン様式を組み合わせています。ページはただデザインされたというよりも、芸術志向です。デザイナーの方々へのメモ：芸術とは、余分な装飾の多いファンシーなレイアウトのことだけではありません。小さなディテールや全体のカラースキームを、コンテンツに合わせて変化させることも大切です。 Olle Locomotive Locomotiveのポートフォリオサイトは、マテリアルデザイン（Material Design）を基本としながら、Googleの模範通りには見えない素晴らしい例です。一部の要素にはマテリアルデザイン（Material Design）に典型的な特徴を見ることができますが、独自の個性もあります。 Locomotive AREA 17 モダンで美しいデザイン、ブラックとホワイトのコントラストが強調されたカラースキーム、アシンメトリーを組み合わせたのが、AREA 17のポートフォリオです。私自身、自分のグレースケールのウェブサイトを気に入っていますが、よく知られているように、ほとんど完全なブラックカラー（スクリーン上では完全なブラックカラーに見えます。）を使ったデザインに成功するのは難しいことです。 AREA 17 C RCL C RCLのポートフォリオサイトは、フルスクリーンサイズのカルーセル（回転ベルトコンベアーのような、スライドギャラリーのデザイン）をページの中央に配置するというリスキーな選択をしています。リスクがあるというのは、このカルーセルが、彼らの紹介する作品を見るためにアクセスする唯一の方法だからです。しかし、それでも美しいデザインにまとめられています。またタイポグラフィも素晴らしいです。 C RCL Whitehall Whitehallはニューヨークのインテリアデザインスタジオです。プロジェクトの全ての作品を素晴らしい写真で紹介していて、フルスクリーンに表示されます。ウェブサイトの他の部分はシンプルで、ユーザーは必要な情報だけを得ることができます。「About(概要)」のページのアシンメトリーなデザインには驚きましたが、このサイト上の他の部分にはない、良いデザインに思えます。 Whitehall Uzik Uzikのポートフォリオサイトは、オリジナリティが高すぎず、上手くデザインされた例の1つです。画像、テキスト、色など全ての要素が効果的に使われています。時々はデザインの定石に従うことにもアドバンテージがあります。Uzikはそれに成功した例です。サイトを訪問して、見てみることをおすすめします。 Uzik Dunlop Builders Dunlop Buildersのポートフォリオは、ミニマリストデザインを利用したビジネスサイトの素晴らしい例です。構成や使われている要素はよくあるようなデザインですが、このサイトならではの個性的なデザインもあります。その個性的なデザインは、主にレイアウトと文字に見ることができますが、画像にも見出すことができます。 Dunlop Builders David Schweitzer 作曲家のDavid Schweitzerのポートフォリオは、1ページの構成ではありません。しかし、最も重要な情報がトップページに集められているため、1ページの構成と見なすこともできるかもしれません。ランダムに色を加えられた幾何学的な図形は、それがなければモノトーン調になるウェブサイトに、刺激的で素晴らしい効果を与えています。ただこれらの図形がテキストと重なる部分で、テキストが読みにくくなっています。私が好きな点は、彼の音楽プロジェクトのコンテンツをクリックすると詳細が表示されるところや、小さなメディアプレーヤーでサンプル音楽を視聴できるところです。 David Schweitzer Geordie Wood Geordie Woodのポートフォリオは率直に言って、実用向きではない散らかったデザインです。一見、どこにメインのナビゲーションがあるのかさえわかりません。ページの右上にある矢印の要素がナビゲーションかと思ったらそうではなくて、写真家の名前のテキストをホバーしたときに現れるようになっていました。この散らかりようは別にしても、タイポグラフィの使い方や、ホバー時にはクリックが終了するまでテキストが画像上に留まって表示されるデザインが好きです。写真の画像のホワイトスペース（余白）はそれぞれ異なる比率で与えられているのも、良いデザインです。実験的で予測不可能な印象が、紹介している写真と合っています。ナビゲーション要素は修正されるべきですが、デザインは好きです。 Geordie Wood Sam Lord Flavin Sam Lord Flavinのポートフォリオでは、実験的なデザインを試みています。このサイトは彼の主な3つのスキルセットを示す目的で使われているようです。アシンメトリーデザインと視差効果(パララックス)が、驚くほど良い効果を生んでいます。 Sam Lord Flavin Villa

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] WordPressで挫折しない学習方法を動画で公開中初期設定とインストールデータベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。また、データベースの文字コードは「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

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。その1つの解決策として、「レスポンシブWebデザイン」が多く使われています。レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。スマホからアクセスしても見やすく表示されます。自分でデザインするためには、まずCSSの書き方などを理解する必要があります。そこで今回は、レスポンシブWebデザインに対応した無料（フリー）のHTML/CSSテンプレートを配布しているサイトを集めてみました。海外サイトも多いですが、全てのテンプレートで日本語の表示が可能か（文字化けしないか）を確認済みです。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。目次汎用系ポートフォリオ系 LP（ランディングページ）用汎用系無料ホームページテンプレート.com シンプルでわかりやすいのが特徴の日本語テンプレート配布サイトです。スタイルシート内のコメント・説明は日本語のため編集しやすく、テンプレートを利用してのサイト作成の入門としても使えます。なお、テンプレートは無料で使用できますが、一番下にクレジットが入ります。あとでシリアルキーを購入することによって解除することも可能です。無料ホームページテンプレート.com Brushed 上のメニューを選択すると該当のコンテンツにスクロールする、1ページ完結タイプのデザインです。コンテンツのソート機能が素晴らしく、スムーズにかっこよく抽出してくれます。かなりの高機能のため一見難しそうですが、設置までの手順などがとても丁寧に説明されているので安心です。 Brushed Orion 事前登録サイトにしてはもったいないくらいおしゃれなテンプレートです。パララックスで奥行きがあり、トップに大きく画像をスライドショーで表示できるので印象に残るサイトになるはずです。残り時間も自由に表示できるので、キャンペーンサイトとしても役立てられるはずです。 Orion Enzyme フリーとは思えないほど充実した内容のテンプレートです。コンテンツの多い本格的なビジネス系サイトを作りたい方などにおすすめです。 Enzyme Nantes こちらは、企業のコーポレートサイトを作る上で相性の良いテンプレートになるでしょう。ワンスクロールで、会社概要や運営しているサービス、会社の中の人を掲載できるようになっています。海外のコーポレートサイトではよく見るレイアウトになっているので、ぜひ参考にしてみてください。 Nantes Bow トップのグラデーションが非常に印象的なテンプレートです。自社製品をより強くPRしたい時に使えそうなイメージです。 Bow Fornax シンプルでフラットなデザインの、おしゃれなテンプレートです。必要な機能も一通り揃っていて、可愛くて使いやすいアイコンやボタンも付いています。 Fornax Elate マウスオーバーした時のホバーや、スクロール時のアニメーションなど多彩の動きを表現したテンプレートになっています。海外では多くの人がダウンロードしているようで非常に人気なのでしょう。自分でコーディングをしたら時間のかかるアニメーションが多いですが、テンプレートを使うことですぐに形にできるはずです。 Elate Stanley ファイルの構成もわかりやすいため、カスタマイズにも便利なテンプレートです。でき上がったサイトもシンプルなので動作も軽快になっています。配布元のサイトで設置の方法が丁寧に説明してあります。 Stanley Obscura Pinterest（写真や動画などのコンテンツをピンボードでとめたようなスタイルのSNS）風のテンプレート。半透明を使った幻想的なデザインが特徴です。こちらは個人使用でのみのフリーテンプレートなので注意しましょう。 Obscura Hold 黒の背景に白の文字と非常にシンプルな印象を与えるテンプレートです。このテンプレートの大きな特徴として、黒の背景・白の文字を切り替えることができるのです。切り替えると白の背景に黒の文字となります。サイト内でこういった遊び心があると、よりユーザーも楽しんでサイトを回遊できそうですね。 Hold Type & Grids 記事をクリックして選択すると、ページ移動やポップアップではなく、その場でスムーズに展開して詳細が見られるテンプレートです。どのように動くのかはデモサイトで試してみてください。 Type & Grids Narrow Bootstrap3フレームワークを使用した、メンテナンス性の良いテンプレートです。jQueryを使用したスケジュール、CSSアニメーションなどの機能があります。 Narrow Beam こちらもBootstrapフレームワークを使用したテンプレートです。フルスクリーンイメージが特徴です。 Beam Magazine Magazineというタイトルのテンプレートだけあって、雑誌をイメージさせるようなサイトを作ることができそうです。白を基調として情報は少なく、写真を大きく表示しているのでスタイリッシュな作りになるでしょう。個人や会社のブログなどブランディング重視なサイトを作る上で役立つはずです。 Magazine Fitness こちらは、Fitnessという名前のとおり、フィットネス系のサイトに向いたテンプレートです。フィットネスの各種コースのスケジュール表や、トレーナーを紹介するページ、お問い合わせページなど、フィットネス系サイトを立ち上げるのに必要なテンプレートがひととおり揃っています。 Fitness [PR] WordPressで挫折しない学習方法を動画で公開中ポートフォリオ系 ASTRAL ポートフォリオサイトを作りたい！という方におすすめしたいテンプレートです。作品を展示するページ、問い合わせを受け付けるページなどが必要最低限におさまっています。 ASTRAL Personal 個人のポートフォリオサイトとして利用できるテンプレートです。自分のプロフィール、経歴、スキルなど情報量は少なく1ページで発信することができるので、一つ作っておくと良いでしょう。 Personal Small こちらもASTRAL同様、ポートフォリオサイトに適したデザインです。 ASTRALが女性らしいデザインなのに対し、こちらはクールな雰囲気になっています。 Small Dsign 個人のポートフォリオとして、企業のブログサイトとして使えるテンプレートです。各記事や作品をグリッドで掲載できるので、自分で作ったものが多ければ多いほど見栄えが良く映るでしょう。ブログ記事を掲載するだけでもまた見に来ようと思ってもらえるはずです。 Dsign Synthetica 気持ち良いアニメーションが特徴のテンプレートです。sketchファイルも入っているので、デザインの編集を行うことができます。個人的なポートフォリオの他、自社の商品紹介、動画紹介にも使えるでしょう。 Synthetica BOX ギャラリーのように並べた写真が特徴のテンプレートです。サブページでそれぞれの情報を記載できるテンプレートがあります。個人のポートフォリオ用として、デザインや作品の紹介に向いているでしょう。 BOX verum 職務経歴や、自分のスキルをグラフィカルに紹介できるテンプレート。エンジニアのポートフォリオとして使うと面白いかもしれませんね。 verum LP（ランディングページ）用 Valet ランディングページ用のテンプレートとして使えるでしょう。ファーストビューの水色が爽やかな印象を与えて、自社製品の紹介もポジティブに映るはずです。自社製品の紹介、製品の特徴、顧客の声などを掲載することができるので、ランディングページとしては十分利用できるかと思います。 Valet Ranger アプリの紹介や自社サービスのランディングページとして活用することができるでしょう。スクロールに合わせて浮かび上がったり、横からふわっと表示されたり動きの多いサイトです。こういったモダンなサイトを作りたいという人にはおすすめです。 Landing Page こちらもビジネス感のある大人っぽいデザインです。 Enzymeと比べるとシンプルなサイトになります。 Landing Page Simple パララックス効果を取り入れた、フルスクリーンでイメージを展開するテンプレート。シンプルなランディングページ用のテンプレートです。 Simple New Providence HTML+PSD Freebie New Providenceは、バランスの取れたタイポグラフィ、高品質のiPhoneモックアップが特徴のランディングページ向けテンプレートです。 New Providence HTML+PSD Freebie Stellar 固定ナビゲーションと、美しいグラデーションの背景が特徴の、ランディングページ向けテンプレート。 Stellar Snow アニメーションなどの視覚効果も必要最小限な、とってもシンプルなランディングページ向けテンプレート。 Snow Elevate テキストアニメーションや、画面を二分割したデザインが特徴の派手系ランディングページ向けテンプレート。 Elevate いかがでしたか。無料とは思えないほどクオリティの高いテンプレートが多く出てきています。自分でゼロから作るのは大変だという人は、ぜひ参考にしましょう。また、WordPressでサイトを制作したい場合は、レスポンシブWebデザイン対応のWordPress無料テーマの記事も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。レスポンシブWebデザインも学ぶことができます。

CSS

CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

CSSでフォントをメイリオにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介フォントをメイリオにする方法について詳しく説明していくね！大石ゆかりお願いします！ CSSでフォントをメイリオにする方法について CSSでフォントをメイリオにする方法について解説してみます。メイリオというフォントについてまずは、メイリオというフォントについておさらいしましょう。メイリオは、Windows OSにて使われているフォントで、従来のMSゴシック、MSPゴシックに代わって採用されたシステム用の書体のことです。システム用書体なので、WindowsOSの入ったマシンを起動したり、ブラウザなどであらゆる箇所に表示されています。なめらかに・視認性・可読性に優れたフォントです。語源は日本語の「明瞭」から来ており、明瞭に、視認性・可読性を向上させるために開発されました。漢字・ひらがな・カタカナ・数字それぞれがゴシック体です。従来のMSゴシックからは、大きく形が変わり、Windows10など最新バージョンでも、バージョンアップされた「メイリオUI」として引き続き採用されています。【参考資料】メイリオについてちょっと難しい用語も出ていますが、以下は国内大手のフォントメーカー「モリサワ」のフォント解説です。参考資料として読んでみてください。 Windows Vista以降のシステム表示用に採用されたフォントで、フォントの名称は「明瞭」に由来します。従来のMS UIゴシックよりも高い可読性を目標に作られました。画面描画用のビットマップを持たないため、すべてのサイズでClearTypeによるスムージング処理が行われます。文字セットはWindows Vistaで採用されたJIS X 0213：2004に対応し、Windows XPまでに搭載されていたフォントとは122文字（マイクロソフト社公表文字数）の字形が異なります。キリル文字やプロポーショナルのギリシア文字などでメイリオ固有の文字セットを持っているため、この文字セット自体を「メイリオ文字セット」と呼ぶことがあります。「メイリオ文字セット」をはじめとするマイクロソフト社の文字セットは、主要フォントメーカが基本としている文字セット「Adobe-Japan1」に比べて、非常に独特で、JIS2004対応フォント「MS明朝」「MSゴシック」、そして「メイリオ」の間であっても、完全な互換性はありません。モリサワフォント用語より引用また、メイリオUIについての詳しい解説は以下のサイトも参考になります。意外と知らないメイリオUI・Yu Gothic UI。UIフォントとはなんなのか（外部サイト） [PR] WordPressで挫折しない学習方法を動画で公開中サイト内のフォントをメイリオ指定してみよう！ font-familyを使おうフォントを指定するには、CSSの「font-family」を使います。サイト内で文字の表示を指定するCSSです。WordやEXCELなどで、文字を統一するためにインストールされたフォントを選んだ経験があるのではないでしょうか？それと同じで、制作者側から書体を指定します。 body{ font-family:フォント名; } 実際にフォントをメイリオ指定する実際に記述する場合は、以下のようになります。実際は、古いバージョンのWindows向けユーザー、Mac向けユーザーへも配慮するのでもう少したくさんの記述をしますが今回はメイリオだけ。とします。 body{ font-family:'メイリオ', 'Meiryo', sans-serif; } フォント名は、日本語表示の場合、シングルクォーテーションまたはダブルクオーテーションでくくります。あれ？2つはいっているじゃないか、と思われたかもしれません。これは、例えば、OSが英語である場合も想定して、という意味です。OSが英語などである場合は、Wordなどで出てくるフォントもすべて英語ベースになります。なので、日本語向けOSのカタカナ表記、英語ベースのOSの場合も考慮し、フォント表示も英語と2種類で表記しておいたほうが良いのです。最後に入れているのは、メイリオがOSにインストールされていない場合を想定して、「メイリオも無ければ、同じゴシック体表示をして欲しい！」という意味です。【参考資料】メイリオが入っていないMacOSではどうなるの？プリインストールされていないMacOSでは、font-familyで指定してもメイリオでは表示されません。端末にフォントデータが入っていないからです。ここは仕方ありません。Macでプリインストールされているフォントも添えておくことがベターでしょう！ body{ font-family:'メイリオ', 'Meiryo','ＭＳゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif; } 今回は、CSSでフォントをメイリオにする方法を解説してみました。監修してくれたメンターゆかちん先生フリーランスのクリエイティブディレクター。制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

WordPressで使えるポートフォリオサイトのおすすめテーマ10選

1. Portfolio

2. Electric

3. ePix

4. RokoPhoto

5. Alona

6. Ananke

7. onetone

8. Onesie

9. Espied

10. Oshine

関連するキーワード

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

【初心者必見！】Webデザイナーが持っておくべき「ポートフォリオ」とは

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

【完全保存版！】デザインを参考にすべき海外のポートフォリオサイト25選

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

すぐに使いたい！レスポンシブWebデザイン対応のHTMLテンプレート30選

CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

1. Portfolio

2. Electric

3. ePix

4. RokoPhoto

5. Alona

6. Ananke

7. onetone

8. Onesie

9. Espied

10. Oshine

記事を検索

関連するキーワード

関連する記事

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

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

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