5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント
こんにちは。株式会社FREE WEB HOPEの代表取締役社長 相原 祐樹です。Webマーケティングは、やるべき事や覚えなきゃならないことが沢山あります。何か調べ物をしようとした時に情報が抽象的だったり、概念的だったりと最終的には調べることに疲れてしまった……なんて経験はありませんか？ 僕はいつも思っていました。 「考え方やマインドセットはいいからやり方を教えほしい」ということを。 そこで、もう自分でWebマーケティングで中小企業がやるべき事を時系列でわかるようにまとめてしまおう思い、「中小企業が今すぐ出来る 実践！WEBマーケティング大全（全116ページ！）」を執筆しました。 実際に僕の会社が設立から4000万/1億/3億/5億(たった8人で)と毎年伸び続けてこられたWebマーケティングに関する5年分の情報を全て整理して分かりやすく解説しています。 本記事では、その中から弊社の得意とする
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
今年流行のフラットデザインで使われているカラーコード
【Diesel】Dieselで使われているカラー... / #F15C22 / #7A7B7D他...全42件
【わずか3ステップ】初めてのWordPressでホームページの作り方
WordPressの「これが困った！」 WordPressで困っていることはありませんか？ サーバー移転／エラー解消／カスタマイズなど、WordPressの「これが困った」を解決します。 WordPressの便利屋 WordPressなら簡単にホームページを作れるという噂は本当か？ 確かに、WordPressを利用すれば以下のような3ステップでホームページを自作できます。 でも、注意したいのがWordPressならではの危険性。 WordPressでホームページを作ると、以下の3つのリスクがあるのを知ってましたか？ ハッキングされやすい ページ表示が遅くなりやすい 定期的なメンテナンスが面倒 こういうリスクを知らないまま、WordPressを利用するのはオススメできません。 事業の売上や顧客の信頼を大きく損なう失敗へとつながる恐れがあるからです。 例えば、ホームページがハッキングされて大切
レスポンシブデザインの簡単な確認方法 | DevelopersIO
レスポンシブデザインのテストツール Webサイトへアクセスするデバイスは、スマートフォン、タブレット、PCなど、非常に多様化してきており、 レスポンシブWebデザインが重要になってきています。 対応デバイスが増えるということは、それに伴ってテストも大変になるということです。 そこで今回は、Webサイト作成の際に「iPad２だとどう見えるんだろう」といったケースで簡単に確認できるツール、 designmodo.com/responsive-testを紹介します。 使い方は簡単です。ここへアクセスし、 画面上部のテキストボックスに、対象のURLを記述しましょう。(http://localhostとかでもOK) そして、画面右のドロップダウンメニューから「iPad」とか「15" Macbook Pro」とかの対象デバイスを選択すれば、 そのデバイスでどう見えるか確認することができます。 また、確
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
【WordPressのデータベース（DB）を操作したいので初めの一歩から勉強して理解しています】｜今村だけがよくわかるブログ
ところでですが、MySQL,PostgreSQL,oracleなどのDBMSは、これまで一通り触ってきました。ですので、初歩的な予備知識はあると思っています。が、私個人的にWordPressに関しては、「WordPressを構成してるデータベース（DB）の理解」をしないと、うまく扱えない。前に進めないな、と感じています。 当たり前かもしれないですけども・・・ WordPressのDBに関する理解私の現状の理解は、 WordPressはDBMSとしてMySQLを採用していて、インストール時に決めたDBに、WordPressを構成するテーブルを作成するcodexのサンプルコードを参考に、ちょっとだけDBの値を引っ張ってくる程度ってくらいです。 あ、あとWordPressインストール時に作られるテーブル名も、前回調べました。（昔PostgreSQLで構築する方法もあるのはどこかで見たけど、そこは
グーグルが「安全対策」として一部サイトへのアクセスをブロック 毎日ｊｐなど大手サイトも - MSN産経ニュース
米国の大手検索サービス「グーグル」が、大手サイトを含む複数のＷｅｂサイトへのアクセスをブロックしていることが５日、わかった。グーグル日本法人によると、ユーザーの安全確保策の一環として自動で行われているという。ブロックされている大手サイトには、「毎日ｊｐ」や「マイナビニュース」が含まれている。 グーグル日本法人によると、これは「セーフブラウジング機能」といい、そのサイトにアクセスすると、パソコンやスマートフォンが損害を受ける可能性があると判断した場合に、アクセスをブロックするという。「いくつあって、何が問題だったかは個別には説明できない」（広報部）という。 対象となるのは、パソコン用のグーグル検索だけでなく、アンドロイド仕様のスマートフォンもグーグル検索を使うため対象となる。 ５日午後の時点で複数ある対象サイトに「毎日ｊｐ」や「マイナビニュース」は含まれている。実際にグーグルで日本語検索して
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
4.サイト全体の構成を考え、コンテンツを作成する順序をつける ｜ リアルタイムSEO日誌
今回の流れと目的 マインドマップを整理し、コンテンツマップを作る それぞれのコンテンツが持つ役割・重要度を改めて考える 役割・重要度などから制作の順序付けを行う 次回のお知らせ 今回の流れと目的 今回の流れ 前回マインドマップを利用し、メンバーと一緒に「どのようなコンテンツが考えられるか」について話し合いを行いました。 今回はそこで得られた情報を整理し、実際に作るサイトのコンテンツマップと、コンテンツの作成手順を決定していきたいと思います。（今回は私一人で進めた作業です） 今回の目的 今回の目的は、「全体像の把握」と「作業の優先順位づけ」です。 私達はこれから解体工事のポータルサイトを作成しますが、これはあくまでも事業としての取り組みです。趣味でサイトを作るのであれば、好きなものから順に、行き当たりばったりで作っていけばよいのですが、事業である以上しっかりと計画を立て、効率的に進めていかな
ウェブデザインにおける透過の効果的な使い方と注意点
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
選んだ色を基準にして、色を選べるWEBツール「colllor」
色の決定や配色は難しく、経験があるデザイナーでも迷う事も多いのではないでしょうか？オレンジや赤と一口にいっても様々なオレンジや赤があり、最終どの色がふさわしいか吟味に時間を使うというデザイナーも多いと思います。今日紹介するのは自分の選んだ色を基準にして、色を選べるWEBツール「colllor」です。 このツールはまず自分で色をカラーツールで選択し、その後選んだ色の周辺色やトーン違い等を並べて提示してくれるというもので、その色の差を見比べながら決定できるというものです。 詳しくは以下 上記は色を選択して結果を表示したスクリーンショットです。基準になっている色がくぼんでいて、そのWEBセーフカラーが表示されています。それを基準とし様々な周辺色が並べられています。 即座に反映できるようにセーフカラーはクリックしてクリップボードにコピーする事が可能なので、決定したら煩わしい手間無く、サイトに反映で
サイトを運営している人ならチェックしておきたい情報サイトまとめ - ウェブネタマニア
サイトを運営していて 必ずチェックするようになった 役立つ情報サイトをメモ ■コリス 言わずと知れたサイト制作に関するアウトプットとクリップした情報を 紹介するブログ フリー素材の情報等も豊富 ■かちびと.net Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介しているサイト ■Webクリエイターボックス WebデザインやWebサイト制作、最新のWeb業界情報などを紹介してるサイト。 ■二十歳街道まっしぐら 管理人のカメきちさんが みつけたWebサービスや役立ちそうな情報を更新 ■ライフハッカー［日本版］ 生活全般に役立つライフハック情報を紹介しているサイト（ウェブネタも多数） ■フリーソフトの樹 おすすめのフリーソフトや知っていると便利な無料サイトなど、 パソコンを楽しむ情報を幅広い分野で毎日紹介しているサイト ■100shiki 海外のユニークなサイトを紹介 ■Ph
無料すぎて助かった！WEB制作が「はかどる」素材まとめ
作成：2013/01/21 更新：2014/11/01 Web制作 > 無料素材のブックマークが無限に増えてきた そうだ！整理しよう 今回は一つ一つ紹介せず、すでに「素敵にまとめてあるサイト」をまとめました。まとめ系４８サイトのまとめです。 フォント、素材からレスポンシブ対応した初心者でもOKのWordPressテーマまで、全て無料です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．日本語フリーフォント ２．海外のおしゃれなフリーフォント ３．国内の写真素材 ４．アイコン ５．ユニークな素材 ６．ベクター ７．Photoshop補助 ８．ワイヤーフレーム ９．レスポンシブなWordpressテーマ １０．スマホ用ページ テンプレート １．日本語フリーフォント 重複するのもありますが、以下のサイトでほとんどの無料系フリーフォントが揃うと思います。 201
レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://jp.techcrunch.com/2015/09/01/yappli-raised/
ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト
新着記事
新着記事
