何でも制作できる！色々なサイトの「つくりかた」と知識まとめ

• 作成：2014/03/10
• 更新：2014/11/01
• Web制作 >

慣れていないジャンルのサイトを制作するときに素早く構築できるよう、コーポレート・ペライチ・通販・ポートフォリオ・サービス系ページなどジャンルごとに「つくりかた」や、簡単にシステム構築できるプラグインなどをまとめました。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

もくじ

ポートフォリオサイト

• １．つくりかた

コーポレートサイト

• ２．つくりかた（WordPress版）
• ３．受注から納品後までの全工程

Ｗｅｂサービス系＋ペライチ

• ４．ブラーエフェクト（曇りガラスっぽく）
• ５．フルスクリーン（画面幅にピッタリ）
• ６．パララックスデザイン
• ７．横スクロール系
• ８．Modern UI
• ９．可変グリッド

販売系サイト

• １０．ＥＣサイト
• １１．電子書籍を販売
• １２．画像販売
• １３．不動産サイト
• １４．予約管理システム
• １５．メルマガ配信
• １６．会員制サイト

ランディングページ

• １７．作成、チェックポイント

ポートフォリオサイト

１．つくりかた

自分の活動や作品を公開するポートフォリオサイトはクリエイターさんや就活生、フリーランスなら自己アピールとして持っておきたいところ。こちらはポートフォリオサイトを作るうえで参考になる全制作フロー。作品の構成要素・スクリーンショット・ワイヤーフレーム（サイト設計）の部分など。

• webデザイナーの転職に役立つ、ポートフォリオサイトの作り方 | tipsBear
• 一挙大公開、WordPressによるブログ兼ポートフォリオサイトの制作概要まとめ | GanoWeb
• WEBデザイナーになるために！就活を成功させるポートフォリオの作り方 | Web制作会社スタイル

コーポレートサイト

２．つくりかた（WordPress版）

Web制作会社やフリーランスさんなら、会社案内として機能するコーポレートサイトに携わることが多いと思います。こちらはWordPressでコーポレートサイトを構築するときの全手順。

• ざっくり把握！WordPressで企業サイトを構築するまで手順 | PLUS
• WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）

３．受注から納品後までの全工程

受注前、制作フロー、安定収益源の保守方法。もう一つはHTML5+レスポンシブ+WordPressでサイトを構築するときのコーディングフロー。

• フリーも社内も助かった！Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
• 完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) | コムテブログ

Ｗｅｂサービス系＋ペライチ

ひとつのページにコンテンツを集めたシングル型レイアウト「ペライチ」。縦や横に長くスクロールさせたり、別ページに遷移せず１ページで完結し、jQueryやCSS3を駆使してダイナミックな動きにします。動きや写真でコンテンツを見せたいとき、Webサービスらしく見せたいときに。

４．ブラーエフェクト（曇りガラスっぽく）

これまでのトレンドの一つに、くすんでいるような曇りガラスっぽい効果（ブラーエフェクト）をつける見せ方が多くみられました。以下はレスポンシブ対応＋CSS、フィルタなど。

• 背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
• CSS と SVG で曇りガラスのような効果を作る | Unformed Building
• 【2013年注目必至！なCSS仕様】CSSフィルタ、これはすごい！（デモ付き） | OpenWeb

５．フルスクリーン（画面幅にピッタリ）

背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。

• ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
• 第13回　フルスクリーンで背景画像を表示するには：Webデザイン最新トレンド ～イマドキUIのつくりかた ｜gihyo.jp … 技術評論社
• CSSだけで背景を画面全体にする方法 | No:1053 | Ri-mode Rainbow

６．パララックスデザイン

スクロールすると背景などが動く「視差効果」を取り入れたページの作り方。jQueryを使ってスクロール量を取得し動きをつけます。こちら基本的なパララックス効果の与え方。

• パララックスサイトの作り方の初歩｜WEB Drawer
• 簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG

７．横スクロール系

こちらはサイト全体を横や縦にスクロールさせる方法や、簡単に効果を付与できるjQueryプラグインまとめ。

• jQueryで横スクロールのアニメーションするサイトを作る方法 | Webロケッツマガジン
• シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋

８．Modern UI

商品写真やコンテンツなどのアイテムを簡単にタイル状に並べることができるjQueryプラグイン。

• アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」:phpspot開発日誌
• Automatic Image Montage with jQuery | Codrops

９．可変グリッド

こちらもほんの少しの手間で可変グリッドレイアウトができるjQueryプラグイン。

• たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER

販売系サイト

今回はWordPressプラグインを使って、プログラムの知識がなくても簡単にサービスなどを導入する方法などをまとめました。

１０．ＥＣサイト

WordPressとWelcartによるECサイト構築方法。国産プラグイン「Welcart」を重点的に解説してあるサイトをご紹介します。

• -Welcartの使い方まとめ(WordPressで作るECサイト)-Whisper | Diary
• 【WordPressにショッピングカートシステムを導入する方法】「Welcart」プラグインを使用してECサイトを構築する « 今村だけがよくわかるブログ
• ダウンロード販売ができるWordPress用ショッピングカートプラグイン | takerui.com
• WordPressで通販サイトを構築するためのプラグイン24選 : できパソ

１１．電子書籍を販売

書籍販売用プラグインLiterally WordPressの使い方。以下はダウンロード販売の実践、paypal決済を行う方法を詳しく解説してあります。

• 俺の印税がこんなに高いわけがない〜WordPressで電子書籍を販売〜 | 高橋文樹.com
• WordPressで漫画ダウンロード販売サイト作りにチャレンジしてみる

１２．画像販売

写真販売のサイトは沢山ありますが、Image Storeを使うことで簡単に販売サイトを構築できます。画像や写真の販売用サイトのカートシステム。

• WordPressを写真やアイコンなどの画像販売サイトに出来るプラグイン・Image Store - かちびと.net

１３．不動産サイト

不動産サイトが作れるプラグイン。国産なので安心して使えそうです。もう一つは不動産プラグインの基本設定。

• WordPress 不動産プラグインで不動産ホームページ
• 不動プラグイン基本設定

１４．予約管理システム

予約システム　MTS Simple Booking C　を使って予約システムを作成する手順。

• WordPressプラグイン「MTS Simple Booking C」による予約システムの作成
• Online Booking Calendar　wordpress用予約システム作成プラグイン | WordPressのテーマやプラグイン情報

１５．メルマガ配信

有名なプラグインSubscribe2を使ったメルマガ発行までの手順。ニュースレター系プラグインの比較はこちら。

• WordPressのメルマガ発行プラグインSubscribe2の使い方と設定方法！
• 高機能なメールマガジン配信システムを作れるWordPressプラグイン「MeeNews」 | Web活メモ帳

１６．会員制サイト

WP-Membersを使った会員制サイトの構築方法。会員は「購読者」ユーザーとしてユーザを追加します。

• WordPress 会員制サイトの作り方 WP-Members | hijiriworld Web
• WordPressで会員に更新してもらうサイトを作る方法
• WordPressで有料会員制サイトを作成する – フロントエンドユーザー管理プラグインの活用事例３ | WordPressのプラグイン販売サイト CMS×WP

ランディングページ

１７．作成、チェックポイント

構築方法というか、ＬＰ作成時のチェックリストですが参考になるので。訪問者数の何％がページの最下部まで到達しているかなど。

• Webディレクター必見！ランディングページ制作の生死をわける11のチェックリスト | LPO研究所
• 売れるランディングページの作り方 | めしおブログ - アフィリエイト教材のレビューブログ