慣れていないジャンルのサイトを制作するときに素早く構築できるよう、コーポレート・ペライチ・通販・ポートフォリオ・サービス系ページなどジャンルごとに「つくりかた」や、簡単にシステム構築できるプラグインなどをまとめました。UI9.可変グリッド販売系サイト10.ECサイト11.電子書籍を販売12.画像販売13.不動産サイト14.予約管理システム15.メルマガ配信16.会員制サイトランディングページ17.作成、チェックポイントポートフォリオサイト1.つくりかた自分の活動や作品を公開するポートフォリオサイトはクリエイターさんや就活生、フリーランスなら自己アピールとして持っておきたいところ。こちらはポートフォリオサイトを作るうえで参考になる全制作フロー。作品の構成要素・スクリーンショット・ワイヤーフレーム(サイト設計)の部分など。Web制作会社スタイルコーポレートサイト2.つくりかた(WordPress版)Web制作会社やフリーランスさんなら、会社案内として機能するコーポレートサイトに携わることが多いと思います。こちらはWordPressでコーポレートサイトを構築するときの全手順。フロー、安定収益源の保守方法。一つはHTML5+レスポンシブ+WordPressでサイトを構築するときのコーディングフロー。コムテブログWebサービス系+ペライチひとつのページにコンテンツを集めたシングル型レイアウト「ペライチ」。縦や横に長くスクロールさせたり、別ページに遷移せず1ページで完結し、jQueryやCSS3を駆使してダイナミックな動きにします。動きや写真でコンテンツを見せたいとき、Webサービスらしく見せたいときに。4.ブラーエフェクト(曇りガラスっぽく)これまでのトレンドの一つに、くすんでいるような曇りガラスっぽい効果(ブラーエフェクト)をつける見せ方が多くみられました。以下はレスポンシブ対応+CSS、フィルタなど。OpenWeb5.フルスクリーン(画面幅にピッタリ)背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。Rainbow6.パララックスデザインスクロールすると背景などが動く「視差効果」を取り入れたページの作り方。jQueryを使ってスクロール量を取得し動きをつけます。こちら基本的なパララックス効果の与え方。Drawer簡単パララックス入門。株式会社LIG7.横スクロール系こちらはサイト全体を横や縦にスクロールさせる方法や、簡単に効果を付与できるjQueryプラグインまとめ。UI商品写真やコンテンツなどのアイテムを簡単にタイル状に並べることができるjQueryプラグイン。Codrops9.可変グリッドこちらもほんの少しの手間で可変グリッドレイアウトができるjQueryプラグイン。DECONCEPTER販売系サイト今回はWordPressプラグインを使って、プログラムの知識がなくても簡単にサービスなどを導入する方法などをまとめました。10.ECサイトWordPressとWelcartによるECサイト構築方法。国産プラグイン「Welcart」を重点的に解説してあるサイトをご紹介します。WordPressの使い方。以下はダウンロード販売の実践、paypal決済を行う方法を詳しく解説してあります。Storeを使うことで簡単に販売サイトを構築できます。画像や写真の販売用サイトのカートシステム。ちびと.net13.不動産サイト不動産サイトが作れるプラグイン。国産なので安心して使えそうです。一つは不動産プラグインの基本設定。使って予約システムを作成する手順。有名なプラグインSubscribe2を使ったメルマガ発行までの手順。ニュースレター系プラグインの比較はこちら。Web活メモ帳16.会員制サイトWP-Membersを使った会員制サイトの構築方法。会員は「購読者」ユーザーとしてユーザを追加します。CMS×WPランディングページ17.作成、チェックポイント構築方法というか、LP作成時のチェックリストですが参考になるので。訪問者数の何%がページの最下部まで到達しているかなど。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。前回(あのサイトでさりげなく使われていたCSS小技集)の続きとなります。プラグインや使い方まとめあの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業2014/12/22素早く制作できた!Web制作に役立つトレンドのツール一覧2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。くじ2016/11/28CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。コメントデータの処理方法の詳細はこちらをご覧ください。