この記事は2015年10月23日の記事を再編集しています。 個人や企業がインターネット上でホームページを開設するのは、多くの場合、ユーザーからのアクション、つまりお問い合わせや資料請求、会員登録や販売経路を増やすことを目的としています。 そのためには、製品やサービスの優れた点をただ訴えるだけではなく、興味を持ってアクセスしてくれたユーザーに実際に行動に移してもらえるように、ストーリー性のあるランディングページが必要であると言われています。 自社製品に興味を持ってくれたユーザーのほとんどは、その製品やサービスが本当に自分の求めているものなのか疑いの気持ちを抱いています。 その疑いや心配を取り除くためにどのようなコンテンツが適切でしょうか。 今回は、ストーリー性のあるランディングページ制作のためのフレームワークをご紹介します。 ストーリー性のあるランディングページ制作のためのフレームワーク4選

書籍『Webプロジェクトマネジメント標準』を全文PDF無償公開 ロフトワークは、書籍『Webプロジェクトマネジメント標準』全文をPDFデータで無償公開します。 ロフトワークは、2002年という早い段階からWebとクリエイティブの領域に世界標準のプロジェクトマネジメントの知識体系「PMBOK（ピンボック）」を導入し、Webプロジェクトのフレームワーク確立やリスクの軽減などに努めてきました。その過程で得た知識や経験を体系化、Webの制作現場につながるように編綴し、2008年に技術評論社より書籍『Webプロジェクトマネジメント標準』（共著=林千晶・ロフトワーク代表取締役、高橋宏祐・富士通グループWebサイト統括（*1））を出版しました。 『Webプロジェクトマネジメント標準』は、プロジェクトの課題が個人の能力・努力の問題であると苦しんでいる方々にこそ読んでいただき、制作側・クライアント側の双方が

作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5

WordPress管理画面から、テストデーターをインポートするには、「ツール → インポート」メニューを選択します。 すると、以下のような「インポート」画面が表示されるので、「Wordpress」リンクをクリックします。 ここで、テストデーターのインポート用のプラグインがインストールされていない場合は、「WordPress Importer」というプラグインのインストールが促されます。 ここは、「今すぐインストール」ボタンを押すだけでOKです。（インストールされている場合は、この作業は不要） すると、インポート画面が表示されるので以下の手順でアップロードボタンを押します。 「wordpress-theme-test-date-ja.xml」をローカルから選択する「ファイルをアップロードしてインポート」ボタンを押す すると、以下のようにユーザー名を変更する画面が現れます。ユーザー名を変更した

TL;DR テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。 機能 要件定義をもとに指定の機能が実装済か確認します。 項目 解説

concrete5は、日本の中小企業にとって◯◯◯◯級のウェポンになるかもしれない、という話 by kohki · 2014年12月24日 どうも、私です。 この記事は、concrete5 Advent Calendar 2014参加記事です。カレンダー記事も、千穐楽の直前ということで、色んな意味でプレッシャーを感じます。 ちなみに前日の記事は、mizuno.fumitoさんのconcrete5のブロックのdb.xmlから、雛形を自動生成するという記事でした。 さて、今回の記事は、最後の段落を除き、主に弊社のクライアントとなる方向けに書いています。ですから、読む時はWebサイトを作りたいかリニューアルしたい会社の担当者や、経営者の気分で読んでみてください。またweb制作を業としている方は、この内容をそのままクライアント提案の参考にしてもらってもOKです。 で、〇〇〇〇級のウェポンって何よ？

「イイ商品なのに、ネットで紹介しても反響がさっぱり」、「せっかく作ったサイトが、役にたってくれない」、「Webにどんな文章を載せたら良いのかわからない」――そういった担当者の声をよく聞きます。 Webでの販売促進成功には数々の要因が関わってきますが、Webライティングも重要な要因の一つ。ポイントを理解することで、担当者の悩みが解決するケースも少なくありません。 「商品を誰よりも知っているから」、「料金を抑えたいから」といった理由でライティングを担当している方も多いことでしょう。そこで、効果的なWebライティングのためのノウハウを紹介いたしましょう。 Webライティングとは？ ひとくちに「webライティング」といっても、その受け止め方は人それぞれです。サイトの企画や構成、アイデアといった広い範囲でとらえる担当者もいれば、「て・に・を・は」の使い方などの正しい文章の書き方、キャッチ―なフレーズ

無料で使えるオープンなウェブブラウザ「Firefox」が登場してから今年でちょうど10年になるそうですが、そんな節目の年に、Firefoxを開発しているMozillaがウェブ開発者目線で作成し、開発者やデザイナーにこそ使ってほしいというウェブブラウザ「Firefox Developer Edition」をリリースしました。 Firefox Developer Edition — Mozilla https://www.mozilla.org/ja/firefox/developer/ Firefox Developer Editionはウェブ開発者のために作られたブラウザで、作成・テスト・サイズの変更といった開発のワークフローで必要とされる機能をすべて持っているものです。さらに、専用のアドオンをインストールすれば、Firefox Developer Editionを操作するだけで他のブラウ

Webサイトのリニューアル期限が迫っているのに、打ち合わせが多くてスケジュール通りに進んでいない！ なんてことありませんか。実は、サイトのリニューアル時にメンバーで、たった1回のワークショップをするだけで、打ち合わせの回数が劇的に減ります。そのワークショップの「進め方のノウハウ」を大公開！ 住宅メーカー、リノベーション専門会社のサイトを集中攻略せよ！Webサイトをリニューアルするときに、一般的にどのくらいの期間がかかると思いますか。私の経験からお話しすると、リニューアルする規模にもよりますが、契約からリニューアル完了まで3か月程かかります。そのリニューアル期間に、月2、3回の打ち合わせを行います。ではなぜ、このように複数回の打ち合わせを行う必要があるのでしょうか。 たとえば、 リニューアルの目的が明確になっていない上司の意見と担当の意見にズレがあり、その調整をする必要がある自社のWebサイ

データ通信料が制限を超えて、アクセス規制にひっかかってしまい…… 先日筆者は、スマートフォンでのデータ通信量が3日で1GBを超えてしまい、ソフトバンクのアクセス規制にひっかかり、アクセスのほとんどが封じられる、という罰ゲームを受けました。筆者の料金プランはテザリングのできないプランで、1ヶ月7GBの制限はないのですが、3日で1GBという制限はあるのですね。まったく知りませんでした……。 そして規制を受けた結果、飲み会の場所を知るのに、Gmailのメールをアプリで開くだけで何分も待たされるは、Google Mapにはまったく地図が表示されず、ピンと自分の位置だけで地図がない状態でたどり着かなければならないわで、霧雨舞う渋谷を10分以上さまよい歩く目にあいました。 規制を受けたとはいえ、最大128KBの速度は出るはずです。128KBといえば、はるか古代、ISDNが登場した際には「ものすごく速い

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 コーディングを考慮したWebデザインガイドライン Webデザイン用の Photoshop の基本設定、1px 未満のにじみを発生させない、共通モジュールの外部ファイル化など、コーディングしやすいWebデザインカンプを Photoshop で制作する方法について。 Photoshopでバナー “いい感じ” に制作せよ！ Photoshop でバナーを作る時の環境設定やテキストツールの使い方など。 このブログの [Webデザイン] 文字組みについて本気出して考えてみた も紹介されていました。 DTP→Webデザイナー転向時に、これやったら捗ったよリスト13 | 279-design DTP（

多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき

WordPressの投稿で画像を表示していると思います。私が記事を作成する時には、画像をフルサイズで指定しています。 パソコンやタブレットは画面サイズが大きいので、フルサイズ画像でいいのですが、スマートフォンサイトだとファイルサイズが大きくなりすぎてしまいます。 スマートフォンはパソコンと比べると性能が劣るし、通信速度も遅いので、軽量化することが大事です。 スマートフォンは画面が小さいので、画像サイズも小さめのものを表示しても十分です。 私はスマートフォンで表示した時に、フルサイズの画像から中サイズの画像に置き換えて表示しています。 それだけでスマートフォンにかかる負荷が下がるので、表示速度が早くなると思ったからです。 functions.phpにコードを追加 以下のコードをfunctions.phpに追加して、スマートフォンの時だけ中サイズの画像に差し替えています。 add_filter

TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人

こんにちは、トヨシです。Webサイトの納品後に 「それ見積もりに入れるの忘れてたー！」 というのはだれもが一度は経験したことがあるんじゃないでしょうか。以前は私もWeb制作に関わっており何度も経験が有ります。今回はそんな悲劇が二度と起きないようWeb制作（ホームページ制作）の見積もり時に忘れやすいけど忘れずに検討したい項目についてまとめました。 全体をホームページ制作前、制作中、制作後、その他の4つに分けて紹介します。 とその前に、 見積書の作成にお困りの方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです！レイアウト崩れや記入漏れの心配無用です！ 制作開始前に必要な見積もり項目 企画・ディレクション費用 打ち合わせ、提案書の作成、アイデア、ノウハウ代など見積もりに含めることは多いです。 旧サーバからのデータ移管費用 サーバの変更がある場合はデータやシステムの移管を

WordPressで構築したサイトの対人用 サイトマップをプラグイン無しで作るTips。 手作業は面倒だけど、プラグイン使うほど じゃない、という気もするので、簡単に作 れる方法をご紹介します。もちろん、良い プラグインも存在しますので、プラグインで 問題ないならその方がいいと思います。 プラグインでしたら@jim0912さん作のPS Auto Sitemapというのが一番便利そうです。 ここでは、諸事情でプラグイン使えないんだという方用に。そんな場合あるのかよって言われそうですけど僕はあったのです・・・そう、あれは去年の夏のある日のこｔ 以下のコードをfunctions.phpに貼り付けます。 function simple_sitemap(){ global $wpdb; $args = array('depth' => 0, 'show_date' => NULL, 'date_fo