タグ

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

  • Youtube動画を背景に設定可能なWordPressテーマ・「WP-Tubular」を作ったので無料配布します

    先週の土曜日に書いた記事が思い のほか、ご好評でしたので調子に のってWPテーマにしました。管理 画面でYoutubeのIDを指定すれば、 背景にしている動画を変更する事が 出来ます。勿論無料ですし、リンク の表記も不要です。 もともと、使用しているjQueryのプラグインであるjquery-tubular自体、クロスブラウザに対応(IE6で動作せず、IE7でレイアウトにズレ)していませんのでこのテーマもそんな感じです。jquery-tubular自体のライセンスはMITになります。 昨日、たまたま時間が開いたので突貫工事的に作りました。使用しているjQueryは以前書いた記事をご参照ください。 動画の指定方法 肝心の動画の指定方法です。WP-Tubularを有効化すると、管理画面の外観の所に設定項目の「WP-Tubular Settings」が追加されます。 この項目でYoutubeの動

    Youtube動画を背景に設定可能なWordPressテーマ・「WP-Tubular」を作ったので無料配布します
    fukupage
    fukupage 2010/12/09
    すげーって思うけど、使い道が浮かばないなぁ。いつかどこかで使ってみたいwww
  • Eコマースサイトを成功に導くための18のアドバイス

    Amazon, Apple, DellなどのEコマースを参考にした、商業ウェブサイトとして成功に導くための18のアドバイスを紹介します。 18 best practices to improve your e-commerce website [ad#ad-2] 下記は各ポイントを意訳したものです。 13番の「Google Sitemapに一工夫」は特に目からウロコでした。 Keep it simple どんな種類の商品を扱うサイトでも、サイトはシンプルで一貫したユーザインターフェイスを備えてください。不必要にユーザーを悩ませる情報は掲載しないようにします。 写真のクオリティは高く 商品を見せる写真画像は、クオリティの高いものにしてください。どんなにサイトのデザインがよくても写真が魅力的でないと、ユーザーは買う気を損なうでしょう。 商品の画像は複数 商品写真の掲載は一つだけでなく、複数掲載

    fukupage
    fukupage 2010/12/08
    全てを実現するのは難しいにしても、参考になることは多いなぁ。
  • Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト

    タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) <前へ 次へ>(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308

    fukupage
    fukupage 2010/12/08
    たしかに参考にはなるけれど、こういう他人の褌で相撲をとるようなのは、正直どうなのかと思う。
  • 2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net

    少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための

    2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
    fukupage
    fukupage 2010/12/08
    読めるときにまとめ読みしたいなぁ。
  • 自分でWEBサービスを作りたいと思っている人へ

    fukupage
    fukupage 2010/12/04
    すごく勇気をもらったw 中の人アリガト!/あと、参考図書や参考サイトが上がっていたら完璧だと思う。気が向いたら付け加えてほしい
  • Blitz - ウェブクリエイタの人も,そうでない人も楽しめるデザインブログ

    手相講座 オンラインが気になるなら、こちらのウェブサイトをよくチェックしたほうがいいです。 そして、あなたがすぐ副業になる 手相オンライン講座を購入しようとしているなら、上のウェブサイトで、すぐ副業になる 手相オンライン講座を手に入れると一体何ができるようになるのかについて、十分に理解した上で購入することをおすすめします。 また、レビューや評価が紹介されているなら、それについてもよくチェックしましょう。 下記のすぐ副業になる 手相オンライン講座についての情報も役に立つかもしれません。 商品名:すぐ副業になる 手相オンライン講座 販売商品紹介:手相をゼロから学んで副業になる!覚えなくても始められる!基となる丘・線の解説に加え、応用力がつく読み方や豊富な実例も紹介。特典動画ではさらに学びを活用し副業にしていくための方法も解説した有料鑑定をやるための情報に特化した手相講座です。 電子書籍価格:

    fukupage
    fukupage 2010/12/03
    ありがたやありがたや
  • デザイナーがオススメする無料写真素材サイト15選|ラクスルマガジン | ラクスルマガジン

    fukupage
    fukupage 2010/12/03
    ありがたやありがたや
  • http://e0166nt.com/blog-entry-817.html

    http://e0166nt.com/blog-entry-817.html
    fukupage
    fukupage 2010/11/22
    あとで確認する
  • クリーンでエレガントなウェブ用の無料素材を配付しているサイト -elemis

    布や木などのテクスチャ、タイル状のテクスチャ、アブストラクトなパターン、ウェブページのテンプレートなどの高品質な素材を配付しているサイトを紹介します。 elemis [ad#ad-2] 利用にあたっては個人でも商用でも、無料で利用が可能とのことです。 各素材はタグやカテゴリで管理されており、下記にそのカテゴリを紹介します。

    fukupage
    fukupage 2010/11/17
    これは使えそうな予感
  • [CSS]「background-clip」を使って、テキストの下に画像を表示するスタイルシート

    CSS3の「background-clip」を使って、テキストの下に画像を表示するスタイルシートを紹介します。 また、CSSの特定のプロパティに対する、サポートブラウザと非サポートブラウザへの対応方法も解説されています。 Show Image Under Text (with Acceptable Fallback) デモページ [ad#ad-2] デモはWebkit系ブラウザ(Chrome, Safari)でご覧ください。 マウスホバーでCSS3アニメーションも楽しめます。 マウスホバー時のキャプチャ 「background-clip」は背景の適用範囲を指定するプロパティで、対応していないFirefox 3.6で表示すると下記のようになります。 ※Firefox 4では対応予定 非対応ブラウザでの表示 [ad#ad-2] アイデアのベースとなったスタイルシートは、下記のようになります。

    fukupage
    fukupage 2010/11/17
    これおもしろいなぁ
  • 名刺にパンフレットにWebサイトまで作れちゃう、Adobeの『Project ROME』がすごい! | ライフハッカー・ジャパン

    『Project ROME』は、Adobe製のオールインワンコンテンツ作成ツールです。これがあれば、CDのジャケットやパンフレット、Webサイトなど、18種類ものコンテンツが作れます。ウェブ版とデスクトップ版の2種類が用意されていて、どちらも無料で使えるので、是非お試し下さい。 以下に使ってみた様子を載せておきます。 まず、Project ROMEにアクセスしましょう。 「CREATE」からテンプレートを選べます。コンテンツはこのようにたくさん作れ、名刺、CDジャケット、アニメーションなども作成可能です。 試しに「CD/DVDジャケット」を作ってみます。 プロジェクトはこんな感じです。いかにも高機能って感じが漂っていますね。最下部には、Flashのようなアニメーションバーがあります。 画像や地図を埋め込んだりと、外部ファイルも取り込めるようになっています。 出力は、画像やPDFなど様々。プ

    名刺にパンフレットにWebサイトまで作れちゃう、Adobeの『Project ROME』がすごい! | ライフハッカー・ジャパン
    fukupage
    fukupage 2010/10/29
    すごくっ便利そうなんだけど、かゆいところにちゃんと手が届いてくれるかがビミョーな気が。あとでじっくり触ってみたい。
  • サービス終了のお知らせ

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

    fukupage
    fukupage 2010/09/24
    ……耳が痛い。最初は「またアフィリ系のしょーもない記事か」と思ったけど、とても重たい記事だった。/Webサイトをでっちあげる仕事をしているせいか、思い当たることが多すぎる。/さて、どうしたものかねぇ……。
  • デザインの要素と原則

    2017年6月29日 Webデザイン 今回はデザインの基礎をお勉強しましょう!デザインは複数の要素(エレメント)と原則(プリンシプル)から成り立っています。それらを簡単に説明するとともに、要素と原則を生かしたWebサイトを一諸に紹介します。私は「デザインセンスは才能」とは考えていません。デザインセンスはそれらの要素をどう組み合わせるか、という閃きとその引き出しの多さによるものだと思います。ぜひ参考にしてみてください! ↑私が10年以上利用している会計ソフト! デザインの要素(エレメント)と原則(プリンシプル)は全てのビジュアルデザインの基礎と言われています。要素はデザインの「表現手段」を形成し、原則は「構造的特徴」を構成します。デザインにおける要素と原則の認識は、視覚構成をすることにおいての最初のステップ。Webデザイン、グラフィックデザイン、プロダクトデザインなど、すべてのビジュアルデザ

    デザインの要素と原則
    fukupage
    fukupage 2010/09/22
    確かにこういう記事はなかったような気がするので、貴重だと思う。ていうか勉強になった。
  • ページの読込み速度を改善するための視覚化データを出す「GTmetrix」

    プライオリティが最も高いわけではありませんが、ページの読み込み速度も検索順位に少なからず影響していると言われています。 しかし、改善するには様々な要素が絡んでいるため、すべての分野に精通していなければ、データを見ても、どこに注力すべきかはなかなか見えてきません。 そこで今回は、どの部分に問題があり、その問題のプライオリティがどの程度高いのかまでを視覚化してくれるオンラインツールをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ページの読み込み速度改善に役立つ「GTmetrix」「GTmetrix」は、ページの読み込み速度計測を、詳細に解析し、なおかつ各項目にプライオリティを付けて最適化を助けてくれるオンラインツール。 YslowやFirebug、Google Page Speedな

    ページの読込み速度を改善するための視覚化データを出す「GTmetrix」
    fukupage
    fukupage 2010/08/08
    CMSの動作不良等を確認するために有用なサイト。
  • 見えてきたECサイトの人気レイアウト

    ECサイトのレイアウトは、ユーザーに情報を的確に届ける上で重要な役割を果たす。サポタントの調査結果から、ECサイトでトレンドになっている検索窓の設置場所やサイト幅のピクセル数が分かった。 Web・モバイル業界の人材事業を手掛けるサポタントは7月30日、EC(電子商取引)サイトのレイアウトのトレンドに関する調査結果を発表した。楽天市場(100サイト)、Yahoo!ショッピング(50サイト)に出展しているECサイトおよび企業が独自に運営するECサイト(100サイト)を7月に調査した。 70%がページ上部に「検索窓」を設置 Webページの上部に検索窓を設置しているECサイトは全体の70%だった。増加する商品点数に対し、検索性を向上させる目的で検索窓を設置するECサイトが増えているという。

    見えてきたECサイトの人気レイアウト
    fukupage
    fukupage 2010/08/05
    参考になる。
  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

    デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

    fukupage
    fukupage 2010/08/02
    自分がテンパってる時に、一度現状を振り返るようにブクマ。
  • たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

    IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

    fukupage
    fukupage 2010/07/15
    これで僕もcss3デビューだね(おせーよ
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    fukupage
    fukupage 2010/06/10
    決め打ちするにはちょうどいいので、ある程度頭の中に入れておきたい。