BtoCのLPを成功させる為の20項目｜川端康介
こんにちは、LP制作と運用に強い制作会社nanocolorの川端(@nanocolorkwbt)です。 今回の記事でのLP(ランディングページ )とは、BtoCにおける商品購入の決済完了を目的としたLPのことです。BtoCはBtoBに比べ、比較検討期間の短さや意思決定者の少なさ、合理性よりも情緒が優先されるなどの特徴があります。 「売れたLP」か、それ以外か。 弊社にご相談いただく時に聞く言葉が「売れるLPを作って欲しい」です。販売主にとって「売れるLP」の必要性は多大にある事を重々理解しています。しかし僕は「売れるLP」はこの世には存在しないのではと考えています。 存在するのは「売れるLP」ではなく「売・れ・た」LPである。 「売れたLP」とは様々な施策実施と仮説検証の結果、目標を達成した際に表現されるLPです。そして「売れる」という状況は企業のフェーズや目標数値によって定義は曖昧です。
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
静的サイトを公開するならどこがいいの？ #技術書典 - Crieit
静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の４つで比較しています。 GitHub Pages Firebase Hosting GitLab Pages Netlify 上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。 ※比較的初心者に向けて書いている前提です。 AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。 レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。 また、少し機能について説明が必要な部分があるので、先に説明を書きます。 Rewrite設定について 静的サイト化したSPAを公
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
とあるサイトの高速化についてフロントエンドでやったことまとめ。 - Toro_Unit
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
Web制作における対応ブラウザの選定方法
Web制作における対応ブラウザの選定方法 「フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。 しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。 そのため対応ブラウザの数が多ければ多いほど、Webサイトの
Webデザイナーのキャリアを考える【制作会社と事業会社の違い】
Webデザイナーの求人・案件でよく目にするのが、Web制作会社と自社サービスを運営する事業会社。Web制作会社の求人・案件には、仕事内容のところに「大手サイト、有名企業Webサイトの制作」「受託」といったキーワードが、自社サービス会社の求人・案件には「自社ブランドサイト」「自社サイト」といったキーワードが多く見られます。 それぞれのビジネスモデルでは、仕事内容や必要なスキル、職場環境など具体的にどのような違いがあるのでしょうか？現役Webデザイナーたちの声をもとに、探ってみました。 ＜この記事に関連する記事＞ フリーランスのWebデザイナーになるには？【必要な準備や仕事の始め方を解説】 フリーランスWebデザイナー仕事の取り方【エージェント利用はおすすめ？】 【Webデザイナー向け】後悔しない会社の選び方！未経験必見 目次 制作会社と事業会社における仕事内容の違い Webデザイナーが制作会
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
2015年のWebサイトの作り方 at 67ws
The document summarizes quotes from three individuals about web design and development. Tim Berners-Lee notes that the primary principle of the web is universality, meaning it should be accessible from any device. Jason Fried argues that designing in Photoshop wastes time, as the design then needs to be rebuilt in HTML/CSS. Instead, one should design directly in HTML/CSS to allow for faster iterat
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
SassとGruntとVagurntで考えるWordPressテーマ設計術 | Lovelog+*Lovelog+*
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 Lovelog+*のテーマをリニューアルしました。foundation5_s（Underscores）がベースになっています。 このリニューアルにあたって、 gruntとVagruntを導入し、開発環境を一新しました。WordPress環境開発は、Varying Vagrant Vagrantsを使用しています。子育てをしながらだと、 1日で作業する時間は限られてくるので、中々進みませんが…。閃きだけは降り注ぐので、 それを後は空いた時間に実装するだけ(^^ゞ今回もまたWordPressのテーマ設計を、 sassとgruntとVagruntを使って、 どこまで効率的に、表示速度も含めて開発できるかを念頭に設計しています。ま
Zenback導入してみたら、自分のブログが盗用されまくりで驚く
あるぅ日〜、グノシーの中、こんなのに、出会った〜 ということで 月間1万PV以下だけどAmazonアソシエイト報酬で1万円/月を達成できたその要因のまとめ というエントリー見ました。すげえわたしのPVの1/50以下なのにAmazonの収益大差ない。同じようにやったら月50万か、でも面倒だからやらないんですが、以下のフレーズが心に刺さった。 僕のブログを見にきてくれる人の約8割の流入元はZenback。 当初はZenbackが提供する”関連するみんなの記事”パーツをブログにつけたいという軽い気持ちでZenbackを導入した結果、トラフィックの大半がZenback経由という予期しない事態に。 ええーーーっ、なんだかすげーな、Zenback!! これ、Movable Typeのシックスアパートがやってるんだ、知らなかった。どれどれとさっそく登録してみた。登録は簡単だがもれなくいろいろ付いてくるの
成果につながるLP制作のノウハウ記事14選|初心者～上級者のお悩み別テクニック集 | LISKUL
世の中にランディングページに関する記述は無数に存在します。 しかし、情報量が多すぎて探している記事を発見することが困難だと感じている人も多いのではないでしょうか。 そんなあなたのために、過去リスクルに投稿されたランディングページに関する記事を「これから作りたい」「さらに獲得を伸ばしたい」などのステージ別にまとめてみました。 初めてのランディングページ製作や、既存ランディングページの改善の際には、ぜひとも参考にしてみてください。（参考：ランディングページ制作会社の一覧 ≫） ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。 新しくLPを作る方へ│成果の出るLPの作り方ランディングページは作り方次第で成果が2倍3倍と大きく変わります
WEB+DB Press Vol.81 イマドキHTML/CSS開発
6月24日発売のWEB+DB Press Vol.81にて「イマドキHTML/CSS開発」というタイトルで特集を執筆した。特集では機器や周辺技術の変化と進化がもたらす多様性に、今までのような現状の機器への逐次対応という視点ではなく、未来のそれらを見据えた形で相対するにあたっての考え方や実装方法を解説している。具体的には検証可能な「コンポーネント」という単位をどう作り、それをどう扱うか、だ。 「マルチデバイス」というイマドキの事情 独立性を重視した設計 コンパクトな開発サイクル デバイスの特徴を活かしたUI 環境に左右されない画像 特集はこのような形で構成されている。現状の説明から始まり、コンポーネントの設計から、その実装をまず解説し、それらの自動化・最適化・効率化について、コンポーネントごとに実装から検証までを行う小さなサイクルを中心に据えたワークフローへの変革を絡めて触れていくという形に
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 385 CSS仕様 119 CSS設計 53 HTML仕様 40 SVG 25 スタイルガイド 14 HTML/CSSの実践 135 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 49 セキュリティ 16 パフォーマンス 12 アクセシビリティ 21 デザイン 64 ディレクション 50 ドキュメンテーション 7 JavaScript 592 ECMAScript 45 ライブラリ 70 ブラウザAPI 38 WebGL 42 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 15 非同期通信 5 Vue.js 73 DOM 9 Angular 30 Electron 4 Web Components 14 jQuery 24 Backbone 17 TypeScript 24 Coffee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトの横幅まとめ - ULTRAZONE
Webデザインレシピ » Blog Archive » IE7からのCSSの小難しいセレクタやプロパティいろいろ
HTML5 Boilerplate: The web’s most popular front-end template
