リキッドレイアウトうんぬんに思った - :: Agnist in hatena ::
最近いくつか読んだ、リキッドレイアウトうんぬんの記事について思った。 「サイトの横幅」再論：950px時代のウェブデザイン 具体的なデータを挙げられていてとても参考になりました。 まず最初に、僕は固定幅だろうがリキッドだろうが、サイトの形態・対象ユーザ・トレンドに則した形で臨機応変に幅をデザインすることこそ至上と思っています。…が、その前提の上で自分個人は固定幅の方が好きです。 デザインが組みやすく、目を動かす距離が少なく疲れにくいので。 まず、オトナの都合 Web屋として生きる上で商売としての都合なのですが、実務レベルではリキッドレイアウトより固定幅の方が好まれます。 画像や文字などの要素がモニタサイズやウィンドウ幅一つで位置が異なってしまうと、それだけで「ズレている」と電話がかかってきますし、サイトを印刷したら表示位置が変わったなんてのもトラブルになりやすいです。 結局のところ環境によ
文字化けしない中国語ホームページの作り方（文字参照を使った方法） | どんと来い、中国語
尚、この変換ツールは中国語の漢字だけでなく、ピンイン文字や日本語、またハングル文字など、あらゆる文字を立ち所にして「文字参照」に変換します。 多言語のホームページに役立ててください。日本語の「髙」や「﨑」なども変換できます。（基本的なabcやスペース・改行などは変換しない仕様になっています） 文字が点「・」になってしまう場合 お使いの環境によっては、・が表示されるだけで、中国語が出ない場合があるようです。 このような場合はフォントが日本語になってしまっていることが原因なので、次のように書くことで文字化けせずに中国語を表示することができます。 そのままコピー＆ペーストでしてHTMLファイルに貼り付けて試してみてください。 （スタイルシートでフォントを指定してあげることでも対応できます。中国語のフォントについてのページも参照してください。） <font face="MS UI Gothic">
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
.htaccess実践活用術
現在、WEBサーバのシェアとしてはApacheが過半数を占めています。英国Netcraft社の調査によると2016年4月におけるApacheのシェアは49.15％である（active sitesにおけるシェア。参照：Netcraft: April 2016 Web Server Surveyy）。 2位のnginxを大きく引き離しています。このような世界的に人気の高いApacheをウェブマスターとして使いこなす方法として、このホームページでは.htaccessの利用法について解説します。httpd.confに触ることのできない一般のウェブマスターさんを対象に、「アクセス制限」「カスタムエラーページの設定」「MIMEタイプの設定」など実用度の高い利用法に絞って紹介します。「何をしたいか」のかを中心に、.htaccessの利用法を説明する構成になっています。
.htaccess ファイルを簡単作成「.htaccess Editor」
リダイレクト Fromにサイトパスを入力、ToにURLを入力 301 Moved Permanently 恒久的に移動 From: To: From: To: From: To: 302 Moved Temporarily 一時的に移動 From: To: From: To: From: To:
【コラム】プロに学ぶWeb 2.0な画像テク (1) Web2.0的サイトのグラフィック表現 | クリエイティブ | マイコミジャーナル
Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
商用利用可能な写真が4000枚以上ある「ゆんフリー写真素材集」 - GIGAZINE
今まで山ほど素材関連のサイトを見つけてきましたが、灯台もと暗し、日本にもありました。というか、今まで日本の他の素材サイトは紹介できるだけの質と物量がないところばかりだったのですが、この「ゆんフリー写真素材集」は枚数が非常に多く、ジャンル別に整理もされており、解像度も400メガピクセル相当のものなのでサイトの作成以外にちょっとした印刷レベルまで耐えられるのではないかと。 詳細は以下から。 ゆんフリー写真素材集 http://www.yunphoto.net/ ジャンルは朝焼・夕焼、大地、草原、滝、池・湖・沼、山、海辺、森・林、水中、雪、空・雲、川、岩、紅葉などの自然風景が非常に多く、ほかにも夜景、建物、橋・ダム・噴水他、文化・ダンス、道、花火、都市などの人の営みや、木、花、植物（果実・葉他）、動物、鳥、魚介、昆虫等小動物というような生物関係、小物や乗り物などにいたるまで、大抵のものがそろって
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
有名な企業のロゴをWeb2.0風にする - GIGAZINE
Web2.0風に仕上げた画像の特徴と言えば、 ・角が丸い ・グラデーション効果 ・鏡面に映りこむ ・フォントが大きい ・色彩がカラフル ・あるいはパステルカラー ・つやつやぴかぴかしている などがあるわけですが、それらの要素を放り込んで既存企業のロゴを「Web2.0」風にしようというもの。なかなか愉快なロゴが多いです。 Famous Logos Redone In Web 2.0 Format http://www.aberrant.us/mirror/redesign/ http://livewavecam.com/redesign20.htm Yay Hooray | yh collab: redesign famous logos in web 2.0 format! 一番下の番号をクリックすればどんどん先に進むことができます。今もなお追加されている最中です。 あとWeb2.0の特徴
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
web-conte.com | blue | なぜみんな角丸が好きなのか？
タイトルに惹かれ、「Why Do We Love Rounded Corners?」というこの記事を訳してみた。何が書いてあるのかと思って。われながら、あまりいい訳とも思えないけれど。 インターフェースの設計者やグラフィックデザイナーと同様、われわれも「丸みを帯びたコーナー」に取り憑かれている。Webの開発者はCSS（や、ときにJavaScript）を創造的に用い、可能なかぎり手間をかけずに角丸を表現することを目指して、そのことにどんな苦労もいとわなかったものだ。現在提案されている CSS3 の定義書には、角丸を指定するためのプロパティすら含まれている（Firefox はすでにこのプロパティをサポート済みだ）。 なぜそんなに角丸には魅力があるのか。思い切ってこれから述べようと思うのは、われわれが角丸に魅了されるこの現象が審美的なレベルを超えたものではないかということ。それともう二、三のこと
Alertbox: 2005年 ウェブ・デザインの間違いトップ10（2005年10月3日）
2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 Top Ten Web Design Mistakes of 2005 by Jakob Nielsen on October 3, 2005 Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ！”と思われる方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
○○円ならどこまでできる!? ウェブサイト制作の相場早見表 | Web担当者Forum
Creating a Mac-Type Background in Photoshop
好きなFaviconを淡々と並べてみる | caramel*vanilla
drifting blog by snotch: movabletype-Stylesheet 001
Kagami - Web2.0風 映りこみ（反射）画像API - Bambino Labs