タグ

webとデザインに関するatyksのブックマーク (162)

  • みんなの公共サイト運用モデル 誰でも使える地方公共団体ホームページの実現に向けて

    上記の映像は、研究会の構成員である静岡県立大学の石川准教授にご協力いただき、研究会報告書(製版)の添付CD-ROMに収録されているものです。 (平成18年1月17日掲載分) <視覚障害者(弱視)のホームページ利用方法(4分40秒)> (伊敷 政英 氏) ○動画(ブロードバンド用)  ○動画(ナローバンド用) <肢体不自由者のホームページ利用方法(5分15秒)> (平野 忠雄 氏) ○動画(ブロードバンド用)  ○動画(ナローバンド用)

  • webサイトのリピーターを増やすさりげない5つのコツ

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

    webサイトのリピーターを増やすさりげない5つのコツ
  • 苦労するのはやっぱり…「今時のWEBデザインの分析」グラフが妙に納得されていた : らばQ

    苦労するのはやっぱり…「今時のWEBデザインの分析」グラフが妙に納得されていた 仕事となるとどんな職業にも、相応の苦労はあることでしょう。 しかしながら今時のWEBデザインには独特の苦労ポイントがあるようで、Webデザインを分析した円グラフが人気となっていました。 今時のWEBデザインについての分析 ブラウザごとに表示のされ方が微妙に違うため、WEBデザインをしている人なら思うところはいろいろあるようです。 海外サイトのコメントも沢山集まっていましたので、一部抜粋してご紹介します。 ・「こんなのはたくさんだ、IE6もたくさんだ、というわけでXBOXで遊んでやる」と言う時間:95% ・オレにとってはこのCSSのみでってのは当だよ。よくそうやってテーブルを解決している。 ・IEが好きだってやつがいたら、そいつはスタイルシートを作ったことの無いやつだろうよ。 ・そうだな、あの古いフォーマット。

    苦労するのはやっぱり…「今時のWEBデザインの分析」グラフが妙に納得されていた : らばQ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • WordPressでWebサイトを構築するまでの手順リスト - かちびと.net

    私的なメモです。WordPressで個人的にWebサイトを構築したり、受注した際の手順リストをメモ。自分用のチートシートです。いつも何かしら忘れている気がするのでいつもやる事をぱっと見で分かりようにリスト化しておきます。※個人的な主観が入っています。 Todoソフト等はあまり使わないので当に私的なメモですが、これが誰かのお役に立てたら幸甚です。プラグインなども好みが有ると思いますのでご参考までに。。 [note]情報が古くなったので改正版としてアップデートしました。[/note] インストールDB作成WP最新版をダウンロードwp-config.phpDBに合わせて変更接頭語も変える(wp_ → example_)FTPソフトでサーバーにインストールログインして管理者権限のユーザーを作成作成したユーザー名で再ログインadminユーザーを削除ダッシュボードの不要なコンテンツを非表示にパーマ

    WordPressでWebサイトを構築するまでの手順リスト - かちびと.net
  • CSS で table に斜線を引く方法

    CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル(クリックすればサンプルページに移動します) Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素(ここでは span)に position: absolute; を設定。 斜線(border)を適用する要素の前に &nbsp; を設定。&nbsp; がなかったり、要素の後方に&nbsp; があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t

  • これはもう使用しない方がいいウェブデザインのトレンド

    昔流行ったけど、これはもう使用しない方がいいものや人気がすたれているウェブデザインのトレンドをWeb Design Ledgerから紹介します。 Most Used and Abused Web Design Trends of All Time 以下、その意訳です。 過激な表現も一部あるので、留意ください。 はじめに 鏡面反射 アクア フラリッシュ コーヒーカップ 地球 コミックフォント ストックフォト ペーパー ポラロイド 特大のRSSアイコン 音の自動再生 カウンター マーキー ブラックの背景 スプラッシュページ スキップの無いイントロ ブラックの背景 はじめに トレンドは、ウェブデザインにおける良くないキーワードではありません。実際に、下記のリストのものはその時々でウェブデザイナーを鼓舞させました。これらのアイデアは影響が非常に大きくかったので、大量のクローンが作りだされました。

  • スパムメールから収集したテキスト装飾 : mwSoft blog

    先日、我が家の捨てアドを久々に開いたら、数千件のスパムメールが溜まっていることに気づいた。 オオアリクイみたいなセンスの良いスパムがないかなぁと思って軽く見てみたが、残念ながら良質な内容は見当たらなかった。 ただ、見ていると、テキスト装飾が凝ったものが多くて感心した。 仕事でも情報をテキストで残すことがあるけど、そんな時にちょっと見やすくするのに使えるのではないかと思って収集してみた。 ============================================================ ************************************************************ ============================== ----------------------------------------------------

  • プログラミング知らないHTMLコーダーがダメな理由|増田にゃんねるβ

    1 名前:以下、はてなにかわりまして元増田がお送りします。 投稿日:2009/02/22 10:02:51 web業界にも様々な職種があり、最近では分業化も進んでるみたいだが、 だからって「自分はHTMLコーダーですから、プログラミングには興味ありません」は通用しない。 HTMLコーダーやデザイナーも、プログラミングは勿論サーバーやネットワークの知識を持つべき。 まぁデザイナーは別業界でもある程度潰しがきくかもしれない。 一番危ういのはHTMLコーダー。 HTMLコーダーって、HTMLしか書けない人が多い。 プログラミングは分からない、とか、勉強する気はない、とか言っちゃう人もいる。 HTMLなんて所詮静的なものだから、webっていう分野の中で見たときその重要度は最底辺である。 webは動的でこそ意味があるからね。 HTMLコーダーという職業が未だ成立しているのは、単にプログラマがHTML

  • WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」

    TOP  >  WebDesign  >  WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」 WEBの制作、開発に必要な知識は多岐にわたり、毎回使うものは大体覚えていたりしますが、その都度ちょっとしたところを調べて制作していると言う事をされている方も多いのではないでしょうか?今日紹介するのはそんな人に便利なWEB制作者、開発者のために作られたチートシートをまとめたエントリー「40+ Essential Front End Web Developer Cheat Sheets」です。 Gosquared CSS help sheets 全部で40ものチートシートが公開されていますが、今回はその中から気になったものをいくつか公開したいと思います。 詳しくは以下 ■XHTML 1.1 Cheat Sheet X

    WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」
  • 【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。

    ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです! IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに!」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height(相当)の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi

    【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
  • 長文を分割&横スクロールで見やすくする·bookreader.js MOONGIFT

    Webの発達で日語であっても横に読まれることが当たり前になりつつある。コンピュータ上では縦に際限なく伸びていくので、縦書きは読みづらいのだろう。だが横向きに書かれていても長文であると見がたくなるのは変わらない。 長文をブラウザ上で読むならこれ 特に小説やコラムなど長文を載せているサイトの場合はそうだ。コンピュータは元々書籍に比べると長文を読むのに適していない上に、レイアウトも読みづらいのでは大変だ。そこで試したいのがbookreader.jsだ。 今回紹介するオープンソース・ソフトウェアはbookreader.js、長文を読みやすくするJavaScriptライブラリだ。 bookreader.jsは専用のJavaScriptCSSファイルによって縦に続く長文を一定の長さで区切り、続きを右側に表示してくれるスクリプトが。スクロールは矢印キーか画面に表示される矢印のボタンで行う。 次期バー

    長文を分割&横スクロールで見やすくする·bookreader.js MOONGIFT
  • これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌

    Fun With CSS Shapes - Nettuts これは驚き!CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {

  • WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌

    WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが1ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう?という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、

  • MOONGIFT: Webページの適正チェックに「RightWebPage」:オープンソースを毎日紹介

    システム開発者がフレームワークやプログラミング言語にこだわるように、Webデザイナーの方はWeb標準への適合性に敏感だ。そのための仕組みも用意されているが、Webサイト全体をテストしようと思うと非常に大変だ。 デザイナ/開発者双方にお勧めのテスティングツール そこで手軽にできるようにしてくれるツールを使ってみよう。WindowsMac OSXLinuxのそれぞれで動作するRightWebPageがお勧めだ。 今回紹介するオープンソース・ソフトウェアはRightWebPage、HTML適合性チェックソフトウェアだ。 RightWebPageはローカルファイルまたはURLを指定して適合性チェックを行える。URLに対してはリンクをたどる深さを指定できるので複数のURLを一気にチェックすることができる。アクセシビリティチェックやキャッシュ、クッキー、日付フォーマット、重複リンク、Validなど

    MOONGIFT: Webページの適正チェックに「RightWebPage」:オープンソースを毎日紹介
  • 複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT

    なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい! Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基として、グリッド化されてページの幅に応

    複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
  • ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく

    ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。

  • 秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE

    ユーザビリティを考える上でかなり重要なのがボタンのデザイン。聞いた話だと、某どこかのローンお申し込みページではボタンのサイズを極端に大きくして目立つようにして、ボタンに「OK」とか「投稿」ではなくデカデカと「今すぐ申し込む」というようにラベリングしたところ、数百パーセント増しで申込みがあったとのこと。ほんの少しのデザインの差でもバカにはできません。 というわけで、いろいろな有名サイトのアイディアが詰まって練り込まれたボタンのデザインを見てみると、どれもこれも一見すると普通に見えるようでも、実はそうではないことがわかります。それらには共通して5つのルールが適用されています。 秘伝の法則は以下から。 ■秘伝その1:色 ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。 ■秘伝その2:場所 ユーザーがすぐに見つけることが

    秀逸なユーザビリティのボタンをデザインするための5つの秘伝 - GIGAZINE
  • 「たかが色、されど色」 ヒトとWebと色の関係:MarkeZine(マーケジン)

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

    「たかが色、されど色」 ヒトとWebと色の関係:MarkeZine(マーケジン)
  • 必見!たった2ファイルからはじまる凄いWebサイト構築·Zimplit MOONGIFT

    正直に言えば、相当なめてかかっていた。ダウンロードして解凍してできたファイルはたったの二つ。これで何ができるのかという思いだった。アップロードして、ファイルにアクセスする。出てきたのはユーザ情報設定画面のみ。そしてログインをする。 利用可能なテンプレート 次に表示されるのはWebサイトのテンプレートが列挙された画面だ。たった二つのファイルでこのような情報が、と思わせる内容だ。そしてテンプレートを選んだ所から凄い衝撃が襲いかかった。 今回紹介するオープンソース・ソフトウェアはZimplit、見たまま編集するWebサイト構築ツールだ。ライセンスはAGPLだが、商用向けには有償でライセンス提供している。 ZimplitはテンプレートになるデザインをどこかのWebサーバからダウンロードして展開する(恐らくZimplitの公式サイトから)。そしてユーザが見るであろう画面の上にウィンドウを表示して、そ

    必見!たった2ファイルからはじまる凄いWebサイト構築·Zimplit MOONGIFT