タグ

web制作に関するrti7743のブックマーク (14)

  • プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ

    さて、発注が決まった。クライアントからの要望はまだフワっとしてるけど、納期は何となーく見えている。(もしくは納期だけがカッチカチに決まっている)。 この状態からプロジェクト格スタートまでにディレクターが用意するべきものは何があるんだろう?今日はそのへんをまとめてみます。 ゴールまでのざっくりストーリー たとえばコーヒーのポータルサイトだったとして「コーヒーに関する情報なら何でもあります!」って言っても何も始まらない。そこにあるストーリーを多少適当でもいいのでドラマチックに盛り上げてしまいます。 1:店主はかつて2店舗のカフェを切りもりした実店舗の経営者 2:学生の頃からカフェが好きで、なんとか自分の理想のカフェを作りたかった 3:それは、カフェの持つ独特の雰囲気とコーヒーの香りが大好きだったから 4:だから、自慢のカフェの雰囲気を全国どこにいても感じてもらえるサイトを作りたかった。とか

    プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ
  • Web制作をする前にきちんとしておきたいお金の話し。 │ モノづくりブログ 株式会社8bitのスタッフブログです

    株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高です。 今回は以前からいつ書こうかとずっと思っていた、Web制作お金にまつわるお話を書いてみたいと思います。 みんながみんなではないと思いますが、Web業界に携わっている方の大半は当に良いデザイン、良いサイトを作りたい、という思いが強く、出来れば見積りや請求などのお金の話しには関わりたくない、縛られたくないという方が多いように思います。 どちらかというと私もお金の交渉からは、気持ち的にはできれば避けたいと思ってしまいます。 先日、さぶみっとというWeb制作マッチングサイトを先日見ていたのですが、契約や未払いの相談みたいなものが思いのほか多いのに驚きました。 https://hp.submit.ne.jp/qa いくら仲の良いお客さんでもお金の話しになるとシビアになりますし、支払い交渉はなんだか金金言って

  • SEO検索エンジン最適化チュートリアル

    サイトやページのコンテンツを読みやすく、わかりやすく、使いやすく、そして美しくすること、つまり良好なユーザーエクスペリエンスを提供することは、デザインが担う重要な役割であり、人間のユーザーに対して有効であるのと同様に、SEOにも有効に働きます。 SEOに強いWebデザインの基ターゲットユーザーの設定はWebデザインに欠かせないプロセスです。そのターゲットユーザーのひとつに検索エンジンを加えることで、WebデザインSEOフレンドリーになります。現在の検索エンジンは、人間のユーザーと同じようにサイトのユーザーエクスペリエンスを評価するからです。 ウェブサイトは利用者の便宜のために構築するべきであり、すべての最適化はユーザー エクスペリエンス向上のための調整である必要があります。検索エンジンもそうした利用者のひとつであり、他のユーザーがあなたのコンテンツを見つけるための手助けをしています。

    SEO検索エンジン最適化チュートリアル
  • ユーザーの体感速度をGoogle Analyticsで可視化する – cyano

    ユーザーがページをロード開始してから閲覧できるようになるまでのロード時間はユーザーが自分のページを快適に閲覧できているかどうかを示す重要なファクターです。Google Analyticsのイベントという機能を使用することで、ユーザーの実際の体感速度を可視化することができます。 たとえば、このブログのある期間における体感速度のグラフはGoogle Analytics上で以下のように出ています。 44.84%のユーザーは100〜499msでロードできており、1秒未満でロード完了しているユーザーは合わせて73.49%であるとわかります。また、3秒以上かかっているユーザーも7.42%居ることも分かります。3秒以上ロードにかかるようだと離脱率も高くなるので、7.42%のユーザーに対して何かの施策が必要であるということも分かります。 このように、ユーザーが実際感じている体感速度を可視化することで、この

    rti7743
    rti7743 2011/01/25
    これは便利そう。
  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
  • HTML5で進化したフォーム機能 ここが違う!サンプルで見るHTML5(5)

    はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回:HTML5が注目を浴びる理由とは? 第2回:HTML4から変化したHTML5のマークアップ 第3回:HTML5で再定義された要素と属性 第4回:HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト(パスワード)入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい

  • divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな

    はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追

    rti7743
    rti7743 2010/12/12
    どうしてこうなった系というか、新しいブラウザテスト用のページができたと思った喜ぶべきか。
  • ついに!Yahoo! JAPANがIE6のサポート終了へ

    Yahoo! JAPANを中心に回っている日のインターネット界。 2008年1月に、Yahoo! JAPANトップページの横幅が950pxになった時、1000px弱時代のWebデザインに突入しました。Yahoo! JAPANのすごさというのは絶大で、もしユーザーや顧客先から文句を言われたとしても、Yahoo! JAPANと同じ仕様であるならば、 Yahoo! JAPANだって○○だよ! と言うだけで片付けられるくらい絶大な力を持っています。 さて、そんなYahoo! Japanが、今度はInternet Explorer 6(IE6)のサポートを終了させるようです。 IE6でYahoo! JAPANトップページにアクセスすると次のように表示されます。 お客様のブラウザはInternet Explorer6です。 12月中旬より、Yahoo! JAPANトップページが正しく動作しなくなる場

    ついに!Yahoo! JAPANがIE6のサポート終了へ
  • CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」:phpspot開発日誌

    HTML5 video player in CSS with Silverlight and Flash : MediaElement.js CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 HTML5非対応ブラウザ向けに、Flashはもちろん、こちらのライブラリではSilverlightもサポートしています。 こうしたライブラリも多数出揃ってきていますが、どれがよく使われるようになるんでしょうね。 1つの選択肢として覚えておいてもよいでしょう。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 MooTools用のHTML5動画プレイヤー「Moovie」

  • 縦長いページデザインは是か否か? 楽天におけるスクロール量計測導入の裏側

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    縦長いページデザインは是か否か? 楽天におけるスクロール量計測導入の裏側
  • 透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ

    cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b

    透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ
  • http://e0166nt.com/blog-entry-774.html

    http://e0166nt.com/blog-entry-774.html
  • クライアントからのムチャぶり迷言集

    2013年3月23日 ネタ みなさんはクライアントのとの打ち合わせ中に「そんなむちゃな!」と思ったことはありませんか?私はあります。何度もあります。そんなクライアントからの迷言を集めたサイト: Clients From Hell(地獄からきたクライアント)と、こちらの記事を載せてみようと思います。 ↑私が10年以上利用している会計ソフト! 時間とお金に関するムチャぶり 残念ながら多くの人がWebサイトは簡単に作れると思っているのが現状です。。 「今日中に100ページくらいのWebサイトを作って貰えますか?」 「会社のコンセプトを変えようと思うんだ。Webサイトを作り直すのに2日あれば充分かな?」 「ブログとショッピングカートのついた8ページくらいのサイトを作ってください!3万円で!」 「支払うお金はないんだけど、このシルクのシャツは6000円くらいするから、ほら、持っていってください。」

    クライアントからのムチャぶり迷言集
  • 1