タグ

web制作に関するyanbowのブックマーク (75)

  • 成功するホームページを作る8つのポイント - EC studio デザインブログ

    ホームページを作ってみたが全然売上が上がらない。 多くの方がお悩みになっている問題です。 EC studioにはホームページ売上アップ診断で培われた 独自のノウハウがあり、お客様の売上アップの支援を おこなっています。 今回はその中でも分かりやすく、売上アップに効果的な事例を 画像を用いてお伝えしたいと思います。 タイトル(Title)とページの内容をマッチさせる。 何らかのキーワードで検索をおこなうと、検索結果が表示され そこに並ぶタイトルを見て、私たちはクリックをします。 しかし、表示されたページをすぐに閉じることがあります。 その一番の原因が、検索結果のタイトルと表示されたページの 内容がマッチしておらず、検索した人にとって思わぬページが 表示される場合です。 検索エンジンの検索結果に表示されるページは トップページとは限りません、特に昨今はトップページだけでなく 各ページでのSEO

  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • Webdeveloperのダウンロード:ミナトラボ

    ローカライズについて Web Develoerの日語にかかわる問題が、ほぼすべて解決したことと、Infoaxia社から管理を移管したことを受けて、今後のWeb Developerのローカライズは、BabelZillaで行うことにしました。ローカライズの議論については、BabelZillaのディスカッションパネル、またはメッセージボードでやりとりできればと思っています。自分のアカウントは「minato」です。遠慮なくお声をかけてください。 Webdeveloperとは Web Developerとは、ウェブ制作を補助する拡張機能です。拡張機能は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。そのため、それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows, MacOS X, Linuxでの動作を確認していま

  • システムの品質向上のお供に使えるツール達

    こんにちは、中川です。 今回は、私が普段の開発で使っているツールを紹介したいと思います。 と言いましても、開発中というよりは、開発後半・テスト段階などでの品質向上に役立つことが多いと思われるツール達を取り上げてみました。 Firebug ・https://addons.mozilla.org/ja/firefox/addon/1843/ ・Firefoxアドオン。 ・JavaScriptのパフォーマンスチェックや、エラーチェック。ファイル・ページの読み込み時間チェックに。 ・開発初期から大活躍ですね。 HTML Validator ・https://addons.mozilla.org/ja/firefox/addon/249/ ・Firefoxアドオン。 ・HTMLの妥当性チェック。HTMLが汚いと保守フェーズに影響大ですね。 ・あまり最初は気にせず、最後のほうで一気にチェックしつつ直し

    システムの品質向上のお供に使えるツール達
  • Web開発者が知っておくべきローカルプロキシーツール Fiddler - すがブロ

    最近の愛用は Firefox を普段使っている時は、 HttpFox を使っています。 昔は Live HTTP Headers :: Add-ons for Firefox を使っていたのですが、けして見やすいというわけでは無かったのと、実際にボディの中身を見たいという時にパワー不足が否めません。 そこで、 HttpFox です。 HttpFox :: Add-ons for Firefox レスポンスコードを色分けしてくれたりするので、個人的には見やすいと思う。 たぶん、Firebug の接続タブでも同等のことができると思うのだけど、ウィンドウ領域の使い方とか、色分けの部分とかで HttpFox の方が好き。 こんな感じで閲覧できます。 リクエストパラメータ等も見やすく整形してくれるので助かります。 題は HttpFox ではなく、Fiddler についてです。 Fiddler

    Web開発者が知っておくべきローカルプロキシーツール Fiddler - すがブロ
  • WEBプログラマー必見!WEB脆弱性基礎知識最速マスター - 燈明日記

    以下は、WEBプログラマー用のWEB脆弱性の基礎知識の一覧です。 WEBプログラマーの人はこれを読めばWEB脆弱性の基礎をマスターしてWEBプログラムを書くことができるようになっているかもです。 また、WEB脆弱性の簡易リファレンスとしても少し利用できるかもしれません。 WEBアプリケーションを開発するには、開発要件書やプログラム仕様書通りに開発すれば良いというわけにはいきません。 そう、WEB脆弱性を狙う悪意のユーザにも対処しないといけないのです。 今回、WEBアプリケーションを開発にあたってのWEB脆弱性を、以下の一覧にまとめてみました。 このまとめがWEBアプリケーション開発の参考になれば幸いです。 インジェクション クロスサイト・スクリプティング セッション・ハイジャック アクセス制御や認可制御の欠落 ディレクトリ・トラバーサル(Directory Traversal) CSRF(

    WEBプログラマー必見!WEB脆弱性基礎知識最速マスター - 燈明日記
  • WEB制作、プロの無料サービス活用術──デザインに使えるツール(2) - MdN Design Interactive

    作業効率がアップする隠れた使い方教えます! WEB制作、プロの無料サービス活用術 ──デザインに使えるツール(2) [technique 15] Webサイト内の画像ファイル全体を確認修正ができる 文=高橋義博 Tool Picnik URL www.picnik.com/ 「Picnik」は、登録無料のオンライン画像編集ツールである。Picnikにはさまざまな機能があるが、記事ではWebサイト内の画像を一括で確認し、任意のファイルを修正する方法を説明する。 ライブラリメニュー→“ウェブサイトから取得”に確認したいWebサイトのアドレスを入力すると、簡単にWebサイトで使用されている画像の一覧が表示される。その中から編集したい画像ファイルを選択し、[編集]を選ぶと画像ファイルを編集することができる。 「Picnik」のトップページ “ウェブサイトから取得”にWebアドレスを入力する 多彩

    WEB制作、プロの無料サービス活用術──デザインに使えるツール(2) - MdN Design Interactive
  • WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集:phpspot開発日誌

    Sketchbooks of a Web Developer | LOOKS GOOD Design Magazine WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集。 ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 で紹介したような、PCを使ってWEB上でモックを作っちゃう場合以外にも、手書きでのモックの方が自由度が聞く上にポータブルなので良いという側面があります。 これらPDFテンプレート集を使えば、印刷すれば、ブラウザベースの枠にグリッドがひかれたものをベースとして使うことができ、よりよい手書きモック作成の手助けとなることでしょう。 PC上で作るか、紙の上で手書きで作るか、というのはそれぞれだと思いますが、手書き派な方は覚えておくとよいかも。 これは、デザイナーさんのみならず、WEBサービスを作る開発者の方も使うと便利そうですね。 関連エン

  • CSS で文字サイズを変更する

    第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回は「styleswitcher.js」でCSSを切り替えて、サイトの文字サイズを変更するボタンの設置方法を解説します。 「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」を以下のサイトからダウンロードします。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js からダウンロードできます。 2. font-sizeの値が異な

    CSS で文字サイズを変更する
  • webサイトの裏側の意識を変える事で売り上げをアップする方法

    ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。 はたして、webサイト運営がどのように変わったのでしょうか。 ネットショップを運営している新規クライアントから、サイトリニューアルの依頼がありました。初めてのご依頼だったので、まずはヒアリングから開始。今回のリニューアルは、サイトであまり物が売れず、□□(私が作ったサイト)のように売れるようにして欲しいとの事でした。 しかし話をよく聞くと、当初サイトを作ったときは、ただ作っただけで、特に運営方法についてはアドバイスが無かったとのこと。私はリニューアル前に1つだけある事をするようにお願いしました。その方法とは、実はサイトをいじる事ではありません。結果、売り上げが5ヶ月で3倍になりました。 実は最近、webサイトを制作する側も、データに依存しすぎて、大事な事を忘れているケースが多かったりす

    webサイトの裏側の意識を変える事で売り上げをアップする方法
  • webサイトのリピーターを増やすさりげない5つのコツ

    多くのビジネスサイトのアクセス数を支えている大手検索サイト、YahooGoogleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。 Yahooサーチエンジンのアルゴリズムなんかによく泣かされた事があったけど、webサイトっていうのは結構リピーターを作りやすく施工しておく事で、あまりそういった影響をもろに受けずにすみます。 webサイトと、エンドユーザーとの道。 ユーザーパイプライン。 これを整備しておくと、サーチエンジンの気ままなアルゴリズムの変動がきても、涙目になる事もないのです。 パイプラインを作る意味 ビジネスサイトにおいて、いったい何が重要なポイントになるかというと、多くの場合、そのほとんどがリピート率と検索エンジンからの訪問者数となります。 リピート率が高いサイトは比較的物が売れやすく、また、検索エンジンからの訪問者数が多いと売るためのチャンスがほかのサイ

    webサイトのリピーターを増やすさりげない5つのコツ
  • http://menubuilder.me/

  • Webデザインのリンク集 | ズロック

    ここでしか取得できない、優良文字列ドメイン名、著名サイトドメイン名等希少ドメイン名多数アリ!誰でもカンタン参加可能

    Webデザインのリンク集 | ズロック
  • サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ

    Webサービス公開前にサイトをチェック Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではなく、公開を告知したり、プレスリリースを出す前の状態とお受け下さい。ローンチ前と書くべきだったかもしれませんね。。誤解を与えていたら申し訳ないです。 では、ブラウザチェックツール、モニタ別表示チェック、表示スピードチェックツール、cssや画像の最適化ツール、などなどご紹介していきます。 ブラウザチェック各ブラウザでどのように

    サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ
  • CSSハック一覧

    2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技(?)です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので(Safariがのってない・IE8しかのってない。。等の理由で)、自分用メモ。「こんなやり方もある!」というのがあればコメントして教えてください! ↑私が10年以上利用している会計ソフト! Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h

    CSSハック一覧