タグ

webデザインに関するnymcのブックマーク (11)

  • 日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報

    記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています(元記事)。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例1:楽天市場 有名な日のサイトの多くを見てみると、次のような傾向が見られる。(例えば、 Yahoo Japan、楽天、ニコニコ、JR東日、読売新聞…) 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離

    日本のウェブデザインはなぜこんなにも世界と違うのか? - BRIDGE(ブリッジ)テクノロジー&スタートアップ情報
    nymc
    nymc 2013/11/13
    楽天を日本の代表格にされると辛いぜ・・・
  • レスポンシブWebデザインはブームではない

    スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。 決して軽くするのが目的ではない 基的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。 Ethan Marcotte(イーサン・マルコッテ)氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。 そこから1年くらいたったあたりから日にも広がりつつあります。 広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書

    レスポンシブWebデザインはブームではない
  • 「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた | TM Life

    昨日 に引き続き LESS 関連エントリーです. 「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです. 今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました. ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪ サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい. Table of contents サンプルを実行してみよう テーブルのメインカラーを変数化 linear-gradient を使ってヘッダーにテカリフィルター

    「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」のサンプルを LESS で作ってみた | TM Life
  • インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」

    とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、0から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSHTMLCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ

    インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
    nymc
    nymc 2011/05/04
    超便利じゃん。とりあえず書いちゃったやつとか、あとから整形するの面倒だもんね。
  • 国内Webサイト参考デザイン一覧集 | Maka-veli.com

    ん?タイトルの日語、なんかおかしい?(笑) 自分用に、国内のWEBサイトサンプル集をメモ。 やっぱ国内のが参考にしやすいですよね。 ズロック http://www.zzrock.net/ 一番お世話になってます。 検索も楽です。 そしてサイト自体のデザインも好きです。 (黒×黒のロゴとかやっちゃうとこがまた良い) iKeSai.com http://www.ikesai.com/ なんか気楽に見れる。見やすい。 WEBdeDB http://www.webdedb.com/ 更新減ってきたけど、数多い。 (Faviconつけてほしいー…) WEBデザインの見帳 http://www.web-mihon.com/ 印象から検索できるのは嬉しい。 サイトがかわいい。 webselection http://web-selection.com/ シンプル。み

  • lpo-consulting.com

    lpo-consulting.com 您正在访问的域名可以转让!This domain name is for sale! 一口价出售中! 域名Domain Name:lpo-consulting.com 售价Listing Price:CNY 888.00 立即购买>>    BUY NOW>> 通过金名网(4.cn) 中介交易 金名网(4.cn)是全球领先的域名交易服务机构,同时也是Icann认证的注册商,拥有六年的域名交易经验,年交易额达3亿元以上。我们承诺,提供简单、安全、专业的第三方服务! 为了保证交易的安全,整个交易过程大概需要5个工作日。 具体交易流程可“点击这里”查看或咨询support@goldenname.com。 我要购买>> Process Overview: 4.cn is a world leading domain escrow service platfor

  • ウェブサイトの表示時間を計測する方法 - ネタフル

    ウェブサイトの表示にかかる時間(読み込み)を計測することができるサイトやツールを調べてみました。 こうしたサービスを利用すると、自分のブログ、自社のサイトの表示はユーザが見ると、速いのかしら、遅いのかしら、というのを客観的に見られるでしょうか。 自分が関連しているブログなりサイトなりを繰り返し見ていると、このあたりが分からなくなってしまうことってありますよね。お役に立てば幸いです。 (1)WebWait – Benchmark Your Website 指定した回数だけ繰り返しウェブサイトを表示し、平均の表示時間を計測することができます。 (2)ダウンロード時間測定 | ダウンロードTIMER – ウェブページのダウンロード時間測定ツール URLを入力して計測します。リンク切れがあると止まってしまいます。ネタフルは止まってしまいました。 (3)【買いパラ】ネットショップ検索エンジン 56K

    ウェブサイトの表示時間を計測する方法 - ネタフル
    nymc
    nymc 2010/02/12
    個人的にタイムリーな情報。助かる~。試してないのもあったからやってみようっと。
  • SoHaya.com is for sale | HugeDomains

    Make 24 monthly payments Pay 0% interest Start using the domain today. See details

    SoHaya.com is for sale | HugeDomains
    nymc
    nymc 2010/01/26
    iphoneサイトの作り方
  • Microformats Wiki

    初めての方は、Microformats の手引きからどうぞ。編集を始める前に、how-to-play-jaを読んでください。 はじめに この wiki は microformats コミュニティの中心的なリソースです。発表済みの microformats 仕様、仕様ドラフト、発表パターンの現在のバージョンを見つけることができます。新しいフォーマットのプレインストーミングページや、認められたフォーマットや開発中のフォーマットの問題追跡ページといった開発用のリソースもあります。 スタートするには Microformats を始めるには… まず、自分のページやアプリケーションで、意味的に豊かで説明的で、'POSH' な HTML を書くことに慣れましょう。 「microformats について」のページ、ブログ、メディア紹介例やプレゼンテーション、microformats に関する書籍、ポッドキ

    nymc
    nymc 2009/12/25
    そろそろマイクロフォーマットも考えながらサイト作りますかね
  • CSS のみで吹き出し

    hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom

    CSS のみで吹き出し
  • 受賞作品:Pitta!×AMNクリエイティブアワード2009

    PRSさん (受賞者コメント) この度は、素晴らしい賞をいただきありがとうございます。楽しくバナーを作らせていただきました。MEDIAPORT UPは、音と映像の新しいスタイルを提案している製品なので、ユーザーに疑似体験してもらうようなストーリーをバナー上で表現しています。商品特性を伝えるためには、どうしても前フリとして「ユーザーに装着してもらう」という流れが欲しく、悩んだ末にロールオーバーアクションを入れました。これが良く作用してくれたのかはわかりませんが、多くのクリックを獲得できたことをうれしく思っています。今回参加させて頂いて、自分の広告が配信されるという喜びと、結果が顕著にあらわれるWeb広告の難しさ、奥深さをしっかりと味わいました。広告のプロの方々から非常に貴重なご意見をいただき、大変感謝しております。当にありがとうございました!

  • 1