成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
Webブラウザのプッシュ通知を簡単に実装！「Push.js」の使い方を徹底解説
スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー
★はじめに | Search | Google Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイルサイトとモバイルファースト インデックスに関するおすすめの方法 Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。 モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。このページで説明するおすすめの方法は、モバイルサイト全般にあてはまり、当然のことながら、モバイルファースト インデックスにもあてはまります。 ユーザーに最適なエクスペリエンスを提供できるよう、このガイドで紹介されているおすすめの方法を実践してください。 モバイル フレンドリーなサイトを
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
資生堂のWeb担当者が実践する。失敗しない「Webプロジェクト」の進め方 | 【レポート】Web担当者Forumミーティング 2016 Spring
企業のWebサイトの成否は、企画やデザインの良し悪し以外にも、プロジェクトを進めるための関係者間の「折衝力」が大きくものをいう。日々、社内外を問わずさまざまな担当者と関わりを持ち、自社のWebプロジェクトを推進する事業会社のWeb担当者は、具体的に、どんなポイントに気をつけて仕事を進めていけばよいのだろうか。 「Web担当者Forum ミーティング 2016 春」のオープニング基調講演には、資生堂ジャパンでWeb担当者を務める宿久（しく）和宏氏が登壇。「失敗しないためのWebプロジェクトの進め方」をテーマに、ワンランク上の「折衝力」＝「コミュニケーション力」を身につけるポイントを解説した。 プロジェクトを進めるためのコミュニケーションは「はじめが大事」宿久氏は、資生堂ジャパンにて、商品に関する情報やキャンペーン、プレゼントなどのプロモーションを担うブランドサイトのWeb担当者を務め、アクセ
フェレットプラス（FerretPLUS）｜Webマーケティングポータルサイト
「買うか買わないか」か「どれを買うか」へ進める。ECサイトに新たなお買い物体験をもたらす新サービスとは
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0 [/html] css[css] body { height: 5000px; } .num { margin: 0; posit
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
グーグル、スマホ対応が不適切なサイトの検索順位を引き下げへ
サイトがスマートフォンからの利用に関して何らかの問題を抱えている場合、サイトオーナーに問題解決を促すインセンティブがこのほど登場した。Googleが米国時間6月11日、問題のあるサイトの検索結果の表示順位を下げる計画を発表したのだ。 Googleのモバイル検索チームのプログラマーである加藤義清氏とウェブマスタートレンド担当アナリストを務めるPierre Far氏は、ブログで次のように述べている。「スマートフォンユーザーへの更なる検索体験の向上と、スマートフォン環境での閲覧の支障を減らすため、Googleでは近日中に、誤った設定をおこなっているスマートフォン向けサイトに影響のある、いくつかのランキングの変更を予定しています」 2人はよくある問題の例を以下のようにいくつか紹介している。 デスクトップユーザー向けページを訪れたスマートフォンユーザーをリダイレクトする際、それぞれに対応するスマート
Webコンテンツの制作ガイド~売れるサイト作りに必要不可欠な5ステップ~
収益の獲得（セールス）：収益の獲得、成長はビジネスにとって至上命題だ。従って商用WEBサイトの第一の目的はセールスだ。 見込み客の獲得（リード・ジェネレーション）：お客様のリストは、ビジネスにとって最も重要な資産だ。お客様リストの数の増加率と、あなたの会社の収益の成長率は比例する。 ブランド認知（ファンベース）の拡大：ブランドの獲得は、WEBサイトのメインの目的ではないが、それでも重要な要素の１つだ。なぜなら、ブランドを構築することによって、社会的証明を獲得し、WEBサイト全体のコンバージョンを高めることができるからだ。 この中で、あなたにとって最も重要なゴールは何かを長期的な視野に立って、ロジカルに考えてみよう。（※例えば、バズ部では、２番の見込み客の獲得を最重要目的に設定している。） さて、優れたWEBコンテンツは、WEBサイトの、これらの目的の達成を、以下の３つの側面から、加速させて
Webやマーケな人が情報交換できる業界団体やコミュニティ20選 | Web担当者Forum
Web担当者やWebマーケターにとって、Web担当者Forumなどのメディアから得る情報というのは重要ですが、それで十分というわけにはいきません。やはり、他の会社のWeb担当者さんと話をしたり相談したりしてみたいことも多いでしょう。 今回は、そういった「他のWeb担当者なかま」と情報交換できる場所を紹介します。主に業界団体やコミュニティですが、「ほかの会社の担当者さんは、こういうときにどうしてるんだろう」「こういうサービスやってるとこで、良いところないのかな」などのためには、やはり同じ職種の人が集まっているところが一番ですからね。 私が参加したことのあるところ、実は参加したことがないけれども耳にしたことがあるだけのところなど取り混ぜていますのでご注意ください。でも、やはり大切なのは「実際に行って、受け身ではなく能動的に参加してみること」ですよ。 社団法人 Web広告研究会 Web広告やマー
HTML5--押さえておくべき10のタグ
HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。 HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。 ＃1：<video>タグと<audio>タグ FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
S5-Style
【2024年版】いろんなデザイントレンドを調査、まとめてみた。 私は10年以上にわたり、「最先端の人気デザインを探る」ために数多くののデザイントレンドを調査してきました。2024年も2ヶ月が過ぎ、今年人気になりそうなデザインスタイルが少しずつ見えはじめています。この記事では、グラフィックやWebデザインなどさまざまな分野で注目されているデザイントレンドを詳しく調べてみたのでご紹介します。 地域の活性化に向けたアートプロジェクトの手引きとなる「×ART（かけるアート）スタートアップガイドライン」 地域の公共空間や遊休空間等を活用して行われるアートプロジェクトは、アートそれ自体の本質的価値のほか、地域におけるコミュニティの形成といった社会的価値や地域のブランディング向上といった経済的価値など、地域に様々な価値をもたらします。一方で、プロジェクトを実施する際のノウハウの不足などによって、取り組む
beginners CGI
まずは下のソースを見て下さい。 #!/usr/local/bin/perl print "Content-type: text/html\n\n"; print "太郎"; この三行のみのソースで、実行するとブラウザ上に 太郎 と表示します。 それでは、それぞれの行の意味を順番に見ていきましょう。 一行目 #!/usr/local/bin/perl この行では Perl のパスを指定しますので、ご利用のホームページスペースの指示に従い記述します。 例えばPerl のパスが /usr/bin/perl と記載されていたら、 #!/usr/local/bin/perl と修正します。 Perl のパスは、直接実行されるもののみに必要な記述で、別に読み込まれるファイルなどには不必要です。 自分がアップロードしたスクリプトを実行する Perlの位置を指定する記述なので、初めから作成される方や 初め
御社のウェブも営業もダメな理由はUSP | 企業ホームページ運営の心得
コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。 宮脇 睦（有限会社アズモード） 1分間で「Yes」といわせて億万長者。偶然を装い乗り合わせたエレベーターの中で、投資家に出資の約束をさせた起業家の話しです。わずかな時間で相手をその気にさせる簡潔なプレゼンを「エレベータートーク」といいます。エピソードは半ば都市伝説と化していますが、簡潔に要点を伝えて客の心を掴むのは商売用ホームページでも大切です。「戻るボタン」をクリックされては永遠のさよならとなりますからね。そこで鍵となるのが「USP（Uni
グーグルでは上位なのにヤフーでは順位が低いのはなぜか（またはその逆）？ | Web担当者Forum
ずっと昔（といってもウェブの存在より古い話じゃない）、検索エンジン最適化（SEO）の作業には、検索エンジンごとに個別のターゲット化手法が必要だった。Hotbotならメタタグを使ったキーワード記述のなかで、すべてのキーワードを2つ並べる必要があったし、またNorthern Lightでは、右下の隅に少なくとも1人の踊る赤ん坊の画像を置くことが、大きな効果をもたらした。 現在、ほとんどのSEO担当者は、検索エンジン対策についても検索エンジンターゲティングの基準についても、同一のものを念頭に作業している。 キーワードを詰め込みすぎない賢い使用静的コンテンツの作成検索ロボットが容易に巡回できるURLみんながリンクしてくれそうなコンテンツの構築ソーシャルマーケティング、バイラルマーケティング、ディレクトリマーケティングによるサイトの宣伝こうした手法は、SEO業界全体において、比較的一貫している。 し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブサイトのレイアウトを簡単に作成できるジェネレータ「PageBlox」 | ライフハッカー・ジャパン
Perl基礎入門 : KENT-WEB