タグ

ブックマーク / blog.creamu.com (71)

  • 本格的なネットショップを構築したい人におすすめのソリューション5 – creamu

    95455835/ Hemera/ Thinkstock 手軽に格的なネットショップを開きたいという人にお勧めのソリューションを5つご紹介いたします。 小さなショップから比較的規模の大きなショップまで利用できるものを基として、それぞれの特長を独自の観点で簡単にまとめています。 既に構築したいシステムの要件が細かく決まっている場合は、それが実際に実装できるサービスかどうかを事前にご確認いただくことをお勧めいたします。 EC-CUBE 日発のECオープンソースです。 とても高機能なのに無料で利用できてしまうところが素敵です。 オープンソースですから、自身で機能を追加することも可能です。 もちろんその場合は技術力を要しますが、EC-CUBEを利用したサイト構築の代理店も多く存在しますので、そういったところに依頼するのも手です。 サーバを既にお持ちだったり、多少の技術的知識がある場合におすす

    pitworks
    pitworks 2010/05/20
    1.EC-CUBE 2.MakeShop 3.カラーミーショップ!プロ 4.osCommerce 5.ネットショップオーナー
  • WordPressでパンくずリストを表示するシンプルなコード – creamu

    WordPressでパンくずリストを使いたい。 そんなときにおすすめなのが、『How To: Breadcrumbs in WordPress』。WordPressでパンくずリストを表示するシンプルなコードです。 ネストされたカテゴリーやページにも対応しているようですね。 パンくずを表示するプラグインは、「Yoast Breadcrumbs」や「Breadcrumb NavXT」がありますが、オールドファッションなやり方で実現してみたとのこと。 使い方は、「The PHP Code」に書かれているソースを、WordPressの「functions.php」に追記することで、「<?php get_breadcrumbs(); ?>」と書いて呼び出すことができます。 CSSでのスタイリングもされているので、一度見てみてはいかがでしょうか。 How To: Breadcrumbs in Word

  • jQueryのかっこいいスライドショースクリプト28 – creamu

    かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic Image Slider w/ CSS & jQuery CSSとjQueryで作られた、自動でスライドするギャラリー Animate Panning Slideshow with jQuery 大きい画像の一部がパンしながら移動するスライドショー SlideDeck jQuery plugin とてもかっこいいスライドショー。無料版と$99の有料版がある。Basecampのサイト等、実装例多数 jQuery Infinite Carousel スムーズな動きのカルーセル(イメージスライダー) Easy Slider

    pitworks
    pitworks 2010/04/06
    jQueryのかっこいいスライドショースクリプト集
  • シンプルだけど意味のあるロゴデザイン30 – creamu

    アイディアに富んだロゴデザインがしたい。 そんなときにおすすめなのが、『30 Minimal Logo Designs that Say More with Less』。シンプルだけど意味のあるロゴデザイン集です。 それぞれフォントをうまく使って、ちゃんと意味のあるデザインになっていますね。いくつかご紹介します。 ↑はHOLE。 pencil crown WALK illusion デザインの参考になると思うので、一度見てみてください。 30 Minimal Logo Designs that Say More with Less 今日も終わってしまう。。急いで進めなくては。

  • フッタをブラウザ下部に固定配置するCSSテクニック – creamu

    フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか? cleanstickyfooter 今日もいい天気ですね〜。タス

    pitworks
    pitworks 2010/02/08
    IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハック
  • Appleのようなデザインをするためのコーディングチュートリアル15 – creamu

    Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。

  • jQueryで実装する、奥行きのある回転テーブルの動き – creamu

    普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかもクリックすると、前面にぐいっと回転して出てきます。 以下のようなデモも用意されていて、かなり刺激的なことになっています。 Standard Roundabout in Action Clock 一度見てみてください。 jQuery Roundabout ブログデーになりつつあるな。。今日はインプットが多すぎました。。朝までがんばるぞ。 P.S. 今気づきましたが2つとも田口さんとかぶってしまいましたすんまへんm(_ _)m

  • CSS3を使った、強くて速いデザイン例 – creamu

    CSS3でできることをいち早く知っておきたい。 そんなあなたにおすすめなのが、『Stronger, Better, Faster Design with CSS3』。CSS3を使った、強くて速いデザイン例です。 以下の例が紹介されています。 Inline Form Labels inputのフィールドに透かしテキストを入れる方法。MobileMeで使われていますね。フォーカスした時にopacityで透明度を変化。デモはこちら Fast, Easy Drop-in Modals 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ。美しい。デモはこちら Newspaper Layouts with Columns and Image Masks 新聞紙のような綺麗なカラムレイアウトと、グラデーションによるイメージマスクの例。デモはこちら CSSのコーディングで表現力が増え

    pitworks
    pitworks 2009/12/18
    inputのフィールドに透かしテキストを入れる方法 綺麗なグラデーションの背景と、ドロップシャドウのついたモーダルダイアログ 新聞紙のような綺麗なカラムレイアウトとグラデーションによるイメージマスク
  • あなたが知らないかもしれないPhotoshopの使い方10 – creamu

    Photoshopをもっと使いこなしたい。そんなあなたにおすすめなのが、『10 Photoshop Interface Features you Didn’t Know Existed』。あなたが知らないかもしれないPhotoshopの使い方です。 なかなかいい感じのが揃っていますよ。 背景色をグレー以外の色に変更する グレーがぼんやりしているなら、ウィンドウの背景色を黒に変えてみよう。右クリックで可能だ。他の色も選べる 描画色と背景色を簡単に変更する スポイトツールで、altを押しながら色を選択すると、背景色を変更できる シェイプや選択範囲の位置を変更する シェイプや選択範囲を描いている途中で、位置を変更したい場合、スペースバーを押しながら描いたり選択範囲を作成することで移動できる 選択範囲を復活させる 選択範囲を失ってしまった場合、「Ctrl + Shift + D」でもう一度選択範囲

    pitworks
    pitworks 2009/12/14
    背景色をグレー以外の色に変更 描画色と背景色を簡単に変更 シェイプや選択範囲の位置を変更 選択範囲を復活 選択範囲をコントロール レイヤースタイルを初期化する
  • WordPressのアクセス解析用プラグイン集 – creamu

    WebDesignFanで、WordPressのアクセス解析用プラグインがまとまっています。 いくつかご紹介しますね。 Google Analyticator テンプレートを編集不要で、Google Analyticsの解析を可能にするJavaScriptを追加する WP-Stats-Dashboard ブログのStatsタブを開かずとも、ダッシュボードに直接解析結果を表示するプラグイン Search Meter ユーザが検索ボックスから検索したワードと回数を表示 StatPress Reloaded リアルタイムに訪問者の数や検索キーワード、ブラウザ、OSなどを表示 WordPress Download Monitor ダウンロードを管理でき、ファイルのダウンロード数を表示してくれる TweetMeme Button WP上でTweetMemeの解析結果を表示。RT数など WordPre

  • 請求書のデザインいろいろ – creamu

    Smashing Magazineで、請求書のデザインがいろいろと紹介されています。 いくつかご紹介しますね。 Graeme Duckett Hicks Design Francisco Inchauste Devia シンプルですがロゴの使い方、色使い、レイアウト、フォントの選び方などが参考になるのではないでしょうか。 その他、CurdbeeやFreshbooksといった、オンラインで請求書が作れるサービスも紹介されています。デザインの参考になるのでは。 一度見てみてください。 Invoice Like A Pro: Examples and Best Practices 久々にマクド中。kitsonのバッグとか持ったギャルがいっぱいいるぞ。今年はスパンコールとかキラキララメラメがはやりのようですね。。 ギャルと言えば19歳で起業した藤田志穂さんのがなかなかいい感じです。

  • テーブル周りの素晴らしいjQueryプラグイン30 – creamu

    jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sortable Data Table jQuery plugin – jTPS テーブルにページネーションやソート機

    pitworks
    pitworks 2009/11/01
    マウスオーバーした列の背景をカラーリング テーブルにページネーションやソート機能をつける セルをクリックすることで編集可能にする HTMLのテーブルデータからグラフを作ってくれる..etc
  • jQueryを使ってCSSを補強するテクニック15 – creamu

    Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例:Create an Attractive jQuery Menu with Fade In and Fade

  • CSS3・HTML5のブラウザ対応状況一覧 – creamu

    Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ

  • ロゴデザインをする時に参考になるサイト60+ – creamu

    DESIGNM.AGで、ロゴデザインをする時に参考になるサイトが紹介されています。 4つのカテゴリーに分かれてたくさんありますね。いくつかご紹介します。 ロゴデザインのインスピレーションが得られるサイト » Logo Faves » LogoGala » Logo of the Day ロゴをテーマにしたブログ » Logo Design Love » David Airey » Logo Designer Blog ロゴデザインチュートリアル » Zeeのロゴをillustratorで作る方法 » オバマ大統領のOのロゴの作り方 » レインボーカラーのロゴを作るチュートリアル ロゴに関する記事やケーススタディー » Henri Ehrhartのブランドデザイン » Miskeetoのブランドデザイン » Butterfield Photographyのロゴデザインプロセス よくまとまって

  • 使えるユーザビリティーガイドライン10 – creamu

    遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて

    pitworks
    pitworks 2009/10/13
    1.フォームのラベルはフィールドの上 2.ユーザーの視線は人の顔に向く 3.デザインのクオリティーは信頼感を増す 4.ユーザはスクロールしない 5.リンクは青 6.理想的な検索ボックスの長さは27文字入るwidth...etc
  • 素晴らしいjQueryチュートリアル集 – creamu

    AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery jQueryを使ったアニメーションするメニュー » How to create tab with JavaScript シンプルなタブ切り替えコンテンツの作り方 » Animated Navigation with CSS & jQuery マウスオーバー時にくるっくるっと切り替わるかっこいいメニュー » 5 Sliding Content Techniques, Examples & jQuery How to’s 画像をスライドで切り替える超クールなテクニック » jQuery FAQs: Scroll To and Highlight Tutorial ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »

    pitworks
    pitworks 2009/09/28
    アニメーションするメニュー シンプルなタブ切り替えコンテンツの作り方 画像をスライドで切り替える超クールなテクニック ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる,,,etc
  • 魅力的なUIにするためのjQueryプラグイン20 – creamu

    Six Revisionsで、魅力的なUIにするためのjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » SimpleModal シンプルなモーダルウィンドウ » Panel Gallery ユニークなトランジションを持つスライドショー » Easy Image Gallery サムネイル表示型のイメージギャラリー » PikaChoose Belvedere Incに見られるクールなギャラリー » SlideBox たくさんのリンクを表示できるスライドボックス » Single Drop Down Menu シンプルなドロップダウンメニュー » Mouse Over Animation for Text テキストにマウスオーバーすると、明度を変えてくれたりうにょ〜っと拡大してくれるエフェクト あまり見たことのないものやシンプルで使いやすそうなギャラリーなどが揃っていま

    pitworks
    pitworks 2009/09/11
    シンプルなモーダルウィンドウ ユニークなトランジションを持つスライドショー サムネイル表示型のイメージギャラリー たくさんのリンクを表示できるスライドボックス シンプルなドロップダウンメニュー
  • PSDフォーマットのフリーアイコンセット50 – creamu

    speckyboyで、PSDフォーマットのフリーアイコンセットが紹介されています。 ざっといくつかご紹介。 ↑はRadium Icon PSDs。 On-Stage Vector PSD Icon Set Bevel And Emboss – PSD Icons PLASMA TV PSD Headphones PSD その他のリストは以下からどうぞ。 » 50 High Quality Free Icon Sets in PSD Format Safariで高速作業した。やっぱりFxは重いですね。タブ移動のショートカット(command + shift + [)も覚えたしさくさくだ。

  • Webデザイナーのための美しいjQueryプラグイン22 – creamu

    Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery