calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

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

Sponsored Link

もくじ

ポートフォリオサイト

コーポレートサイト

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

販売系サイト

ランディングページ

ポートフォリオサイト

１．つくりかた

portfolio_make

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

コーポレートサイト

２．つくりかた（WordPress版）

make_wp_make

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

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

order_make

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

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

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

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

blur_effect_make

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

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

full_screen_make

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

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

parallax_make

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

７．横スクロール系

side_scrolling_make

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

８．Modern UI

modern_ui_make

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

９．可変グリッド

grid_make

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

販売系サイト

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

１０．ＥＣサイト

ec-welcart_make

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

１１．電子書籍を販売

e-books_make

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

１２．画像販売

image-sale_make

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

１３．不動産サイト

real-estate_make

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

１４．予約管理システム

reservation_make

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

１５．メルマガ配信

newsletter_make

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

１６．会員制サイト

membership-site_make

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

ランディングページ

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

check-lp_make

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

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。