サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ブログを運営していると、他人のブログ(競合サイト)のアクセス数はどれくらいあるのか、どんなキーワードで集客しているのか、気になってきますよね。 競合サイトを調査するメリットは以下の 3 点。 具体的な目標を設定するさいの目安にできる モチベーションを維持するきっかけになる 自分のブログに足りない点を見つけられる 競合サイトの分析に関する解説はこちら ツールを使えば調査はそれほど難しくありません。本記事では、ライバルサイトを丸裸にする分析ツールを 5 つ紹介していきます。 他のブログのアクセス数が推測できる仕組み 他のブログのアクセス数を計測できるツールはいくつかあります。 独自のクローラーを走らせて分析していたり、主な検索キーワードの順位・CTR をもとに算出していたりと計測方法は様々。 なかには、無料で他サイトのデータを提供する代わりに、ユーザーの Google アナリティクスや Sea
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー(ディレクター、Web担当者、エンジニアなど)向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1:ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
Twitter謹製CSSフレームワーク『Bootstrap』を使って固定ナビゲーションを作ってみます。 簡単なカスタマイズのメモです。 Bootstrap, from Twitterとは? Twitter(ツイッター)社が提供しているBootstrap(ブートストラップ)はCSSのフレームワークです。 CSSを読み込むだけで簡単に使えます。 使い方はdiv要素などにclassを指定するだけです。 Bootstrap, from Twitter グローバルナビゲーションを固定にする ページの上部にあるナビゲーションを固定ナビゲーションにします。 スクロールしても同じ場所にあり続けます。 常にページ内の同じ位置にあり続けますのですぐにアクセスできます。 1.基本 body 要素のすぐ下に次のようにコードを書きます。 <body> <div class="navber navbar-fixed-
CSSでスプライト画像を使うことは増えてきましたが、作成が面倒なのは変わっていません。専用のソフトウェアも幾つかありますが今回はWebブラウザ上でスプライト画像を作成できるSpritePadを紹介します。 使い方 使い方は簡単で、まずはアイコン画像をSpritePadにドロップしていきます。 複数ファイルをまとめてドロップできます。ドロップしたらドラッグして好きな場所に配置していきます。 画像を移動すると右側のスタイルシート設定も変わっていきます。 アイコンの配置が終わったらFit documentを押します。そうすると画像の大きさが最適化されます。 こんな感じにジャストフィットします。 ダウンロード 作業が終わったらDownloadリンクをクリックします。そうするとアイコンをまとめた画像とスタイルシート設定がダウンロードできます。 画像ファイル。ファイル名はsprites.pngになりま
はじめまして。このようなやり方の勉強会では以下の理由により意味がないと思います。 ・依頼主の予算感や運用に対する具体的な数字がでていない ・依頼主とのすり合わせができていない ・案件を段階的に進める事が想定されていない 見積は依頼の背景がクリアになって初めて価格の適正が評価可能になりますので、本件のようなスタンスで”典型的なWordPressサイトの見積りでも現状はまだまだ標準的な見積手法が確立されていないことが分かります”とコメントしてしまうのは「無限に広がる土地に家を建てるならこんな設計」って提案を複数並べて「いやー予算と間取りがバラつきましたね。これはまだ建築設計に標準的な工法が無いことを示しています」とコメントしてしまうことと同意で、見積金額がばらつくのは自明です。 また、金額の多寡は状況に依存しますので普遍的に評価することは難しいと思います。逆説的に言えば平均的な価格よりも多少高
デザイン制作時の参考にしたりインスピレーションがもらえる、主にwebデザイン向け国内外のデザインギャラリーを紹介します。 主にwebデザイン向けになりますが、一部デザイン全般で参考になるサイトもあります。 中には特定のテーマやパーツに絞ったデザインのみを紹介しているギャラリーもあるので、日頃デザインしていて「この雰囲気のデザインをいつも悩む」とか「この部分の引き出しを増やしたい」という人は、そういったサイトを日頃からチェックするのがおすすめです。 過去にもこういったデザインギャラリーをまとめて紹介したエントリーを書きましたが、クローズしたサイトが目立ってきたり見つけた当時とは収集しているデザインが異なるテーマになっているサイトなどもあったので、それらの編集・削除も兼ねつつすべてひとまとめにしました。
よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。 要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。 こんな感じ <style type="text/css"> .image-resize { max-width: 200px; max-height: 200px; } </style> <img src="images/test-image.jpg" class="image-resize" />これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。 しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエント
こんにちは、トヨシです。Webサイトの納品後に 「それ見積もりに入れるの忘れてたー!」 というのはだれもが一度は経験したことがあるんじゃないでしょうか。以前は私もWeb制作に関わっており何度も経験が有ります。今回はそんな悲劇が二度と起きないようWeb制作(ホームページ制作)の見積もり時に忘れやすいけど忘れずに検討したい項目についてまとめました。 全体をホームページ制作前、制作中、制作後、その他の4つに分けて紹介します。 とその前に、 見積書の作成にお困りの方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです!レイアウト崩れや記入漏れの心配無用です! 制作開始前に必要な見積もり項目 企画・ディレクション費用 打ち合わせ、提案書の作成、アイデア、ノウハウ代など見積もりに含めることは多いです。 旧サーバからのデータ移管費用 サーバの変更がある場合はデータやシステムの移管を
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その3 目標:わかりやすいワイヤーフレームを作成することができる 必要なもの:紙とペン 対象レベル:超初心者OK
bookreader.js bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。長文を横スクロールで表示し読みやすくするJS「bookreader.js」。 次のページへボタンを押すと、アニメーションしながら横にずれていきます。 本を読むスタイルに似ているためか、bookreader.jsという名前ですね。 文章の見せ方として面白いので覚えておいたらいつか使えそうです。
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
2016年3月19日 Webサイト制作, 便利ツール Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです! ↑私が10年以上利用している会計ソフト! 2016年3月16日 追記:Adobeがリリースしたプロトタイピングツールも試してみました!→ Adobe Experience Design(XD)を使ってアプリのプロトタイプを作ってみた ViewFlux ViewFluxはデザイン画像のシェアやフィードバックが簡単に行えるツール。必要なページのデザイン
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が[一般に〔米〕では Whiskey,〔英〕では Whisky.]であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く