自分の個人サイトは作ったほうがいい
趣味サイトでも、アフィリサイトでも、仕事サイトでも（このサイトとかそうですね）、なんでもいいんで、WEBディレクター個人で「自分自身のサイト」を一個必ず作ったほうがいいです。 で、願わくば何かしらの形で目立ったサイトを作ってしまうとすごく役に立ちます。 たとえば、僕は2010年2月現在、けっこービッグなキーワードで上位に食い込んでいる自分自身のサイトをいくつか持っています。 フォトショップはじめの一歩 Googleの「フォトショップ」検索でAdobe、Wikipediaについで3位～5位くらい。 カラオケ上達ドットコム Googleで「カラオケ 上達」検索第1位。Yahooニュースのヘッドラインに載ったことあり。 コーヒーフリークス 検索ではまだまだあがってこないけど、「雰囲気を持って返れるカフェ」というコンセプトで作られた自分のサイト こういうサイトを仕事以外で作っていると、二つ利点があ
ウェブデザインのインスピレーションを受けられそうなギャラリーサイト | バニデザノート
最近のウェブサイトのデザインってどんなの？と気になったり アイデアやインスピレーションを受けたいときに見たいサイトをいくつか紹介します。 ■日本語サイト S5-Style 検索したときに的確に抽出できる印象。キレイめからシンプルまで。RSSも読みやすい。 Web Design Clip 大手系、キレイ系が多い感じ。 WONDER BOOKMARKS シンプル系、かわいい系、工夫凝らし系がおおい感じ。 ■海外サイト Web Creme シンプルで、おしゃれなサイトが多いです。 Web Design File いわゆる「ザ☆海外サイト」なデザインをクリップ。 日本サイトではあまり見ないようなシンプルでダイナミックな工夫を凝らしたサイトがたくさんあります。 ■Pinterest Pinterest search results for web design Pinterestでweb+desig
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ | Web担当者Forum
レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。この場合、ある画面サイズを境目として適用させるスタイルを切替えます。この境目を『ブレイクポイント』といいます。 画像を見る この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤している最中なのです。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えばよかったのですが、技術革新が進み新しいデバイスが次から次へと出てくるようになり、現在はデスクトップ、タブレット、モバイル、様々なサイズのデバイスが存在しています。 これらの不特定多数
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
HTML5でサイトリニューアルしました。＋ 簡単な解説 - ORANGE AGE Weblog
2年半ぶりくらいに自分のポートフォリオサイト、ORANGE AGEをリニューアルしました。 リニューアルする時どきに自分のやってみたいことを思いっきり反映してきて、前回はフルFLASHサイト、そして今回のリニューアルではHTML5＋jQueryで制作してみました。（CSS3もちょこっとだけ使ったよ） 目次： 1. 今回やりたかったこと 2. HTML5でサイトを作る準備 3. 使用したその他のjQueryプラグイン 4. videoタグで再生する動画の準備 5. 制作実績の各背景、サイズは3000×1600px。ファイルサイズ圧縮が鍵。 6. まとめ＆今後やりたいこと 1. 今回やりたかったこと ・HTML5 ・videoタグで動画再生 ・シングルページの構成 ・視差効果（パララックス） なぜか上手く動かなかったので断念。再チャレンジ予定。 2. HTML5でサイトを作
70 Free PSD Web UI Elements For Designers
Nothing can beat the freebies as they not only save your time but also give quality results. These free to download PSD files are priceless and worth mentioning. Every designer and web developer is always looking for free downloadable PSD files that can make their design process easier. Check this free to download collection of PSD Web UI Elements and share it with others. Do not forget to share y
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
【SEOリサーチ】Webマスターを凍りつかせた強烈な順位変動 大荒れしたYahoo！検索アルゴリズム9月分更新の調査レポート
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の可能性を体験できる、すごいサイトのまとめ
新着記事