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

慣れていないジャンルのサイトを制作するときに素早く構築できるよう、コーポレート・ペライチ・通販・ポートフォリオ・サービス系ページなどジャンルごとに「つくりかた」や、簡単にシステム構築できるプラグインなどをまとめました。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
ポートフォリオサイト
コーポレートサイト
Webサービス系+ペライチ
販売系サイト
ランディングページ
ポートフォリオサイト
1.つくりかた

自分の活動や作品を公開するポートフォリオサイトはクリエイターさんや就活生、フリーランスなら自己アピールとして持っておきたいところ。こちらはポートフォリオサイトを作るうえで参考になる全制作フロー。作品の構成要素・スクリーンショット・ワイヤーフレーム(サイト設計)の部分など。
- webデザイナーの転職に役立つ、ポートフォリオサイトの作り方 | tipsBear
- 一挙大公開、WordPressによるブログ兼ポートフォリオサイトの制作概要まとめ | GanoWeb
- WEBデザイナーになるために!就活を成功させるポートフォリオの作り方 | Web制作会社スタイル
コーポレートサイト
2.つくりかた(WordPress版)

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

受注前、制作フロー、安定収益源の保守方法。もう一つはHTML5+レスポンシブ+WordPressでサイトを構築するときのコーディングフロー。
- フリーも社内も助かった!Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
- 完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) | コムテブログ
Webサービス系+ペライチ
ひとつのページにコンテンツを集めたシングル型レイアウト「ペライチ」。縦や横に長くスクロールさせたり、別ページに遷移せず1ページで完結し、jQueryやCSS3を駆使してダイナミックな動きにします。動きや写真でコンテンツを見せたいとき、Webサービスらしく見せたいときに。
4.ブラーエフェクト(曇りガラスっぽく)

これまでのトレンドの一つに、くすんでいるような曇りガラスっぽい効果(ブラーエフェクト)をつける見せ方が多くみられました。以下はレスポンシブ対応+CSS、フィルタなど。
- 背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
- CSS と SVG で曇りガラスのような効果を作る | Unformed Building
- 【2013年注目必至!なCSS仕様】CSSフィルタ、これはすごい!(デモ付き) | OpenWeb
5.フルスクリーン(画面幅にピッタリ)

背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。
- ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
- 第13回 フルスクリーンで背景画像を表示するには:Webデザイン最新トレンド ~イマドキUIのつくりかた |gihyo.jp … 技術評論社
- CSSだけで背景を画面全体にする方法 | No:1053 | Ri-mode Rainbow
6.パララックスデザイン

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

こちらはサイト全体を横や縦にスクロールさせる方法や、簡単に効果を付与できるjQueryプラグインまとめ。
- jQueryで横スクロールのアニメーションするサイトを作る方法 | Webロケッツマガジン
- シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々! | バンクーバーのうぇぶ屋
8.Modern UI

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

こちらもほんの少しの手間で可変グリッドレイアウトができるjQueryプラグイン。
販売系サイト
今回はWordPressプラグインを使って、プログラムの知識がなくても簡単にサービスなどを導入する方法などをまとめました。
10.ECサイト

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

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

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

不動産サイトが作れるプラグイン。国産なので安心して使えそうです。もう一つは不動産プラグインの基本設定。
14.予約管理システム

予約システム MTS Simple Booking C を使って予約システムを作成する手順。
- WordPressプラグイン「MTS Simple Booking C」による予約システムの作成
- Online Booking Calendar wordpress用予約システム作成プラグイン | WordPressのテーマやプラグイン情報
15.メルマガ配信

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

WP-Membersを使った会員制サイトの構築方法。会員は「購読者」ユーザーとしてユーザを追加します。
- WordPress 会員制サイトの作り方 WP-Members | hijiriworld Web
- WordPressで会員に更新してもらうサイトを作る方法
- WordPressで有料会員制サイトを作成する – フロントエンドユーザー管理プラグインの活用事例3 | WordPressのプラグイン販売サイト CMS×WP
ランディングページ
17.作成、チェックポイント

構築方法というか、LP作成時のチェックリストですが参考になるので。訪問者数の何%がページの最下部まで到達しているかなど。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Leave a Comment