photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、共有します。 photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、 共有します。 はじめに photoshopの素材を紹介しているサイトは多いので、 主にphotoshopの素材の提供を主としてるサイト、 またはそのようなカテゴリを持つサイトのみを集めました。 紹介文の後のリストはそのサイトで扱ってる素材の種類となります。 また、ライセンスについては分かる範囲で記載しましたが 間違いがありましたら指摘頂けると助かります。 サイト一覧 dev

facebookの機能をサイト上で使えるfacebook social plugin。僕が知らないだけかも知れませんが、今ではいろんな種類が出ています。今後も使用する機会があると思うので、調べるついでに一覧にしてみました。 facebookの機能をサイト上で使えるfacebook social plugin。 僕が知らないだけかも知れませんが、 今ではいろんな種類が出てるんですね。 今後も使用する機会があると思うので、 調べるついでに一覧にしてみました。 Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button はじめに “Registration”以外のs

OGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 このブログではOGPタグを設定するのにOpen Graph ProというWordPressのプラグインを使ってたのですが、 descriptionの設定が不安定だったので、最近Facebook Toolsというプラグインに変えてみました。 このプラグインはOGPタグの設定だけでなく、いいねボタンやfacebookコメントボックスの設置も簡単に行えます。 ざっと使い方まとめました。 インストール インストール方法は通常のWordPressプラグインと同じで

最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現する「THE SLIDE」。 流行ってるのか知りませんが、取り敢えずこのブログも流れに乗っかって設置してみました。 最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現して オススメの記事を紹介する「THE SLIDE」。 流行ってるのか知りませんが、 取り敢えずこのブログも流れに乗っかって設置してみました。 インストール THE SLIDEは、そのページを見てる人にお勧めの記事を紹介してくれるウィジェットです。 WordPress、Drupal、Tumblr、Blogger、 その他ブログの様に記事を作成するタイプのサイトに使用できます。 WordPressにはプラグインがあるので、プラグインを利用すると簡単に設置できます。 ちなみにWordPressのプラグイン名は「SimplleReach

HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要

MAMPとは、Macintosh、Apache、MySQL、PHPを省略した名前です。 そしてMAMPというソフトを使えばこの環境を簡単に構築する事ができます。 基本的な手順はソフトをダウンロードしてアプリケーションフォルダにコピーするだけです。 MAMPのサイトよりMAMPをダウンロードします。 MAMP: Mac, Apache, MySQL, PHP ダウンロードされたら解凍します。 ディスクイメージファイルになるのでダブルクリックで開きます。 開いたらMAMPフォルダをアプリケーションフォルダにコピーします。 アプリケーションフォルダにコピーされたMAMPをダブルクリックで立ち上げると、 自動的にApache、MySQLが起動し、スタートページが表示されます。 スタートページが表示されれば問題無くインストールされてます。 phpMyAdminやSQLightManagerも入ってま

どのページをつくるか？ まずトップページ。 体裁が変わるようであれば下層ページも作ります。 また、システムが入るプロジェクトでは画面遷移図としてつくることもあります。 結局のところプロジェクトによります。 競合他者調査 競合他者がどのようなサイト設計を行ってるか参考にします。 他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。 全く同じ設計にしてしまうのは問題がありますが、 「何故そのような設計にしたか？」を考える事でワイヤーフレームをつくる時の参考になります。 例えば賃貸のサイトではトップの目立つ場所に検索メニューがあります。 賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。 （これは誰でも分かる例ですが…） また、ユーザーは過去の体験から次のアクションを予想します。 過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想

このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery

前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。 WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。 前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので 作業の流れをまとめました。 やり方は人それぞれだと思いますが、 作業の参考になってくれたら幸いです。 ラフの作成 HTMLマークアップ デザイン（テーマ）のカスタマイズ WordPressテーマ作成 Tipsなど 1.ラフの作成 一般的なwebサイト制作と同様にまずラフを制作します。 また、jQuery Mobileの特徴でもある画面遷移時の効果や、 表示のされ方などもこの時点で決めて

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ

私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ