タグ

Web制作に関するyoshi_zoのブックマーク (70)

  • 優れた文章を書くための11の賢いヒント » SEO Japan

    無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 米国でNo.1人気のライティングに関するブログ「コピーブロガー」から優れた文章を書くための11のヒントを。英語ならではのアドバイスもありますが、大半は日語にも通じるかと。 — SEO Japan あなたは難しい言葉を使う時、自分が賢くなったような気になるだろうか? Applied Cognitive Psychologyに発表された研究によると、その答えはNOだ。 実際、複雑な文章はあなたを狭量な人間のようにさせてしまう。こんな研究タイトルはどうだろう:Consequences of erudite vernacular utilized irrespective of necessity:

    優れた文章を書くための11の賢いヒント » SEO Japan
  • webデザイナが使いそうな48px四方の究極のアイコン750個を無料でダウンロード

    思わず音速でクリップしてしまった究極系エントリー。 配布している方が究極だというのだから、きっと究極なんです。 webデザイナーが使いそうなアイコンパック ダウンロードは以下から。 どんなのが入ってるの? ちょいと量が量なので小さく表示してますが、サイズは48×48pxです。 興味のある方は是非。 The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources) - Smashing Magazine こちらとあわせてどうぞ。 ハイクオリティ無料アイコンまとめ100パック2009年最新版*ホームページを作る人のネタ帳 それでは、また。

    webデザイナが使いそうな48px四方の究極のアイコン750個を無料でダウンロード
  • 無駄なdiv要素やclassだらけのマークアップから卒業する方法

    グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク:960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ

  • CSSビギナーに気をつけてほしい5つのポイント | コリス

    スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。 スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。 CSS Beginners Do's and Dont's Part 2 下記は各ポイントを意訳したものです。 1. classとidは適切に使用する ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS来の目的からはずれるものです。 CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。 Bad p要素それぞれに全て個別のclassを使用しています。 <tex

  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • web制作者のための2009年話題になったサービスいろいろ

    ちょいと古めのうっとりくるサービスやエントリーを持ってきました。 なんて事はない。私がお勧めする2009年度に話題になったwebサービスや、ジェネレータを中心に、厳選してお届けいたします。 Twtiiter関連多し Twitterプロフィール検索 その名のとおりついったーのプロフィールを検索する検索エンジン。同じような趣味を持っている人を探すときなどに使われる。 ついったーの友人関係を可視化するwebサービス 友人関係というか会話関係があられもない姿で現れる恐ろしいサービス。 TweetLevel ついったーの影響力を測定するサービス。 影響力というか戦闘力。やってる事は単純なサービスなんだけど、こうやってしっかりデザイン組んで作り上げるところが当に参考になった。どんなサービスであれ、愛情は見習わなければならない。 Twib - Twitter ホットエントリー Twitterでのホッテ

    web制作者のための2009年話題になったサービスいろいろ
  • 第1回 ウェブブラウザとJavaScriptの未来 | gihyo.jp

    こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください(間違いやすい、わかり難いと思われるところは適宜補足します⁠)⁠。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ

    第1回 ウェブブラウザとJavaScriptの未来 | gihyo.jp
  • シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ - かちびと.net

    個人的にミニマリズムなサイトが 好みなので自分用の備忘録です。 情報が多いので若干まとめのまとめ という感じになっていますがご了承 下さい。シンプルなサイトを作る時に 役立ちそうなリソースやギャラリーを。 内容はシンプルなアイコン、インスピレーション向上に必須なギャラリー、相性の良さそうなフォントなどになります。 白黒のサイトを作りたいときに役立つもの、という記事と被りますがご了承下さい。 Iconic モノクロながら可愛らしい感じのアイコン103個セット。 Iconic picol 汎用性の高そうなアイコンセット。 picol Token 色々なところで紹介されてるアイコン。28万人中10万人はDLしてるみたいです。人気ですねー。 Token Brightmix icon set EPSファイルで配布されるアイコンセット。丸型にほぼ統一されてます。地球のアイコン凄いですね。。 Brigh

  • モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ(最終回) | モバイルサイト構築のユーザビリティいろは

    2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる! モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな

    モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ(最終回) | モバイルサイト構築のユーザビリティいろは
  • 直帰率を下げるには? ユーザーが直帰する4つの理由 | ウェブ力学

    自分のサイトの直帰率が気になって、直帰率を下げたいと考えている人は多いのではないでしょうか? そこで直帰率を下げる方法を単刀直入に説明したいところですが、その前にまずユーザーが直帰する理由を知る必要があります。直帰率と一口に言っても直帰する理由はユーザーごとに異なり、対応策もその理由によって異なるからです。極端な話、直帰率が高くても問題が無いケースだってあります。 ここでは、ユーザーが直帰する理由を4つに分類して対応策をまとめてみました。あなたのサイトの直帰率が高い原因はどれに当てはまるかチェックしてみてください。 反射的に「違う!」と判断される そのページを訪れたユーザーが内容をほとんど見ずに、反射的に直帰してしまうことがあります。こういった滞在時間の短い直帰はコンテンツの内容以前の問題であり、早急に改善する必要があります。 原因としては、「デザインが極端に稚拙」、「レイアウトがブラウザ

  • 少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル:phpspot開発日誌

    少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル 2010年03月03日- 30 High-Quality Free Website Templates to Download|Dzine Blog 少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイルが30種類も紹介されています。 次のような、当に、当にフリーでいいんですか?当にフリーでいいんですか?とつい歌ってしまいそうなレイアウト集がダウンロード出来ます。 色鮮やかでインパクトあるデザインや、すっきり見やすいレイアウト等、そのままWEBサービスに使ってしまってもよいようなものばかりです。 ライセンス等は確認したほうがよいと思いますが、活用すれば手間を大きく削減出来るかもしれませんね。 関連エントリ チュートリアルで

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

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

    サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ
  • フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ

    Webデザインパーツごとのデザイン例 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザインユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。 30 Creative Website Headers クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。 30 Creative Website Headers 27 Stunning

    フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
  • 40分で覚える!jQuery速習講座 (1/6)

    いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは? そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目:導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

    40分で覚える!jQuery速習講座 (1/6)
  • うっとりしてしまうデザインのシングルページWebサイト30

    2017年6月29日 Webデザイン シングルページのWebサイトはあまりコンテンツがない場合・ひとつの物を強調したい場合に効果的です。Javascriptを使っておもしろい動きをつけたシングルページもたくさんあり、1ページの中にたくさんのアイデアがつまっています!ここでは世界中のWebサイトの中から美しく個性的なデザインのサイトを紹介します。次のWebサイトデザインの参考にしてみてください! ↑私が10年以上利用している会計ソフト! シングルページのWebサイトギャラリー pikaboo http://www.pikaboo.be/ フルFlashのサイトかと思ったらJavascriptで滑らかな動きを表現していました!必見! Think Green Meeting http://www.thinkgreenmeeting.com/ 車と飛行機のイラストがマウスオーバーで消えていきます!

    うっとりしてしまうデザインのシングルページWebサイト30
  • Google App Engineを使って無料でサイトを立ち上げる方法 - EC studio 技術ブログ

    Googleが提供する、Google App Engineというサービスを知っていますか? Amazon EC2などと同じで、Googleが用意するクラウドサーバー環境で アプリケーション開発ができるというサービスです。 (レンタルサーバーのようなもの) その大きな特徴は、なんといっても月間500万PV相当まで"無料"ということです。 ※有料で制限を拡張することも可能 ※2011/09/07 注 Google App Engineの新料金体系が発表されました。 新料金体系では無料で使える枠が大幅に削減されています。 この記事の無料での使用制限に関する記述は、新料金体系では 正しくありませんのでご注意ください。 「App Engine は無料で始めることができます。最大 500 MB の永続性ストレージに加え、月間約 500 万ページ ビューに対応できる十分な CPU と帯域幅を、すべてのア

  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

  • Webのバグを燃やしまくるFirebugと、そのアドオン7選

    Webのバグを燃やしまくるFirebugと、そのアドオン7選:ユカイ、ツーカイ、カイハツ環境!(10)(1/3 ページ) 高度化するWebのデバッグに悩む人、必見! 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer(以下、IE)がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者/デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 稿では、Firefoxのアドオンとして利用するFirebugと、

    Webのバグを燃やしまくるFirebugと、そのアドオン7選
  • 携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α

    前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー(もしくはディレクター?)さんは、デザインをパッと見て「このデザインで組めます!」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード:Shift-JIS ・改行コード:

  • 2009年に発見した秀作アイコンのまとめ:phpspot開発日誌

    今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b