タグ Webデザインクリップ
人気順 5 users 10 users 50 users 500 users 1000 usersデザインの参考に!見てるだけでも楽しいピンタレストで見つけたグラフィックデザイン・タイポグラフィ関連のボードまとめました。 | Webデザインクリップ
前回ピンタレストでロゴデザインをまとめましたが、皆さんはネット上で見つけたデザインの参考になる画像や自分で制作した物などをどのようにスクラップしてますか? 普通の保存してフォルダに入れておくだけでは持ち歩けないですし、evernoteやdropboxも他の内容もどんどん入っていくので集めてもいまいち中々見なくなります。また自分の好みのデザインばかり集めてしまって、いざ違うジャンルのデザインを作る際... 続きを読む
デザインの参考にしたい時に最適!世界中のクリエイターのポートフォリオが見れる「Behance(べハンス)」を活用しよう | Webデザインクリップ
Behance(べハンス)って何? 「Behance(べハンス)」は、世界中のクリエイターが公開・閲覧・共有できる、オンラインポートフォリオサービスです。 Online Portfolios on Behance 最近Adobeが買収したので、「Adobe Creative Cloud」に入っている人はログインする際にBehanceのマークがあるので見たことがある人も多いと思います。 また日本でも... 続きを読む
良いデザインを見て学ぶ!毎月チェックしたいWeb/アート/広告/デザイン雑誌まとめました【2014年版20誌】 | Webデザインクリップ
Webサイトやブログで膨大な情報が無料で手に入るので、なかなか本や雑誌を買わない人もいると思いますが、ネットではどうしても自分の好みの情報を取得してしまいがちなので、僕はいつも書店に行って雑誌をチェックして少しでも気になるものがあったら買うようにしています。 4月となり、デザイン関連の仕事で働き始める人や、学校でデザインを始める人達に、いつも自分がチェックしているクリエイティブ系の情報、デザインの... 続きを読む
日本を旅したくなる!一眼カメラで撮られたムービーいろいろ | Webデザインクリップ
YoutubeやVimeoなどで簡単にだれでも動画をアップできるようになったのと、一眼レフカメラでハイクオリティな動画が撮れるようになって来たことで、プロ・アマ問わずさまざまな旅のムービーがアップされてきています。 日本を旅した外国の人の動画では、日頃住んでいる我々とは違う視点で表現されており、とても魅力的に見えます。 旅といえば写真でしたが、これから一眼レフやGoProなどで映像作りにチャレンジ... 続きを読む
クリエイティブ脳が刺激される!見ているだけで心が弾んでしまう デザイン生活雑貨をまとめました | Webデザインクリップ
繰り返す毎日の中で、人はどれくらいの”物”を使用しているのでしょうか?何気なく使っているコップや椅子。普段は余り意識しないものたちにも、ほんの少しのスパイスを足すことで生活をクリエイティブにする為のヒントがたくさん詰まっているように感じます。 今回はそんな雑貨達の中から、眺めているだけでもクリエイティブ脳を刺激してくれそうなユニークなデザイン雑貨を大きなものから小さなものまで国内/国外問わずまとめ... 続きを読む
レスポンシブ対応も含め、Lightbox系(モーラルウインドウ)プラグイン25個の簡単な使い方とサンプルまとめました | Webデザインクリップ
jQueryを使ったプラグインの中でもポピュラーな背面をグレーアウトさせて画像などを表示するLightbox系のプラグイン。 ギャラリーサイトで拡大画像を表示したり、HTMLを読み込んで詳細情報を表示したりなどと、あらゆるサイトでさまざまな使われ方をしており、現在では多機能なオプションを備えたものから、レスポンシブWebデザインに対応したものまでさまざまなプラグインが存在しています。 今回はそんな... 続きを読む
良いデザインを見て学び、情報収集に役立つ!毎月チェックしたいWeb/アート/広告/デザイン雑誌まとめました。 | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
いまWebサイトで膨大な情報が無料で手に入るので、なかなか本や雑誌を買わない人もいると思いますが、ネットではどうしても自分の好みの情報を取得してしまいがちなので、僕はいつも書店に行って雑誌をチェックして少しでも気になるものがあったら買うようにしています。 そこで今回はクリエイティブ系の情報やデザインの参考、広告事例などが見ることができる「Web」「デザイン」「広告」「アート」などの雑誌をまとめてみ... 続きを読む
まずはここから覚えたい!作業効率がよくなるPhotoshopショートカットキーまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
どんなソフトを使用する際にもあるショートカットキーですが、ソフトの使い方に慣れてないときはショートカットキーを覚えるというのも大変なので、メニューから探している人も多いと思いますが、毎回ツールバーや上部メニューバーを行ったり来たりするというのはそれだけでかなりの時間のロスになります。 僕も学校では極力ショートカットを使っていこうという話をしていますが、まずはPhotoshopでここから覚えていこう... 続きを読む
タブレットPCを意識した?パンフレットを開くような動きの横アコーディオン型サイト・横スライドサイト | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
最近海外のサイトデザインで縦割のアコーディオン型のデザインを良く見かけます。 その理由を少し考えてみたところ、前回の「PCデザインの新しいカタチ「タッチジェスチャー」を意識したUIデザインのまとめ」の記事と同様の理由で、将来的なタッチジェスチャーを意識したサイトや、現在その代表でもあるタブレット端末での使い勝手を考慮したサイトが多くなって来たからではないかと思いました。 タブレット上で通常のサイト... 続きを読む
PCデザインの新しいカタチ「タッチジェスチャー」を意識したUIデザインのまとめ | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
windows8のUIがタッチジェスチャーを意識したデザインなのは皆さんご周知の通りかと思いますが、ここ最近、UIに合わせるようにPC/ノートPCでもタッチジェスチャーが可能になるモデルが次々と発表されています。 Windows開発部門トップのスティーブン・シノフスキー氏も「2年後、タッチできないPCは欠陥品に思われる」とコメントしており、今後のPCデザインもその部分を踏まえてUI設計する必要があ... 続きを読む
サイトやアプリのデザインのアイデアに使えるUXを生み出すリッチなUIデザインの参考をまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
スマートフォンの復旧により、手でタッチできるという操作性とそのコンパクトさから、一目見ただけで操作方法がわかり使いやすさが伝わるようなUX(User Experience)は今後重要なものになっていきます。 もちろん速さや機能性など技術的な部分でもUXを満たす課題はたくさんありますが、ユーザーの目にする部分で重要となるのがUI(User Interface)のデザインです。 Webデザインにもここ... 続きを読む
とにかく最新のHTML5やJSを使用したサイトをたくさん見たい時に便利!国内外のWEBデザインサイトのタグリストをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサ
リリースされる最新のHTML5やJavascriptを使用したサイトは常にチェックしたいですが、案件に必要な参考サイトを探している時に項目別に一気に見れたり比較ができればより便利です。 そんな時に、いつもチェックしているHTML5やCSS3、Javascriptといった国内外WEBデザインサイトのタグリスト別のデータサーチを紹介します。 先日ご紹介したWEBデザインを制作する際の参考にしているデザ... 続きを読む
MdN Design Interactiveにて連載した「ゼロからはじめるHTML5でのサイト制作」全12回まとめ | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
以前MdN Design Interactiveに連載させていただいた『HTML5でサイトをつくろう!ゼロからはじめるHTML5でのサイト制作』が12回で完結しました。 この連載ではHTML5でのマークアップが初めての方向けにHTML5で変更になった点や新要素の使い方、使い方がわかりにくいといわれていたsection要素やarticle要素の使い方、ブロックレベルやインラインの変わりとなるカテゴリ... 続きを読む
Webデザインのアウトプットに役立つインスピレーションを得られるサイトを集めました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
普段から様々な良質なデザインを見ることでWebデザインのアウトプットに繋がります。学校でもデザインを基礎から学んだわけではないし、美術系の学校に行っていたわけでもない人でもいい物をたくさん見てそこからヒントを得て作っていく人などは未経験からでもかなり伸びていきます。 そして自分の好きなデザインだけでなく、幅広いジャンルのものを見ることも大切です。 先日ご紹介したWEBデザインを制作する際の参考にし... 続きを読む
僕がRSSに登録して情報収集や勉強の際に日々見ているWEB系ブログあつめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
4月から学校にも新しい生徒がたくさん入って来ているので、そういった人たちに向けて僕がWEBの勉強や情報収集するためにRSSなどに登録しているサイトをまとめました。 仕事でもすぐには使わないなーと思っていてもあとでそれに関連した仕事が入ったときにあの時見たなーと思うけど忘れちゃうこと多いですよね? 旬なキーワードやこれから勉強しないといけなそうなキーワードなどの記事があったらブックマークやevern... 続きを読む
WEBデザインを制作する際の参考にしているWEBデザインまとめサイトをまとめました【2012年版】 | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
以前、「HTML5でサイトをつくろう」のブログでwebデザインをする上で普段、参考にしているまとめサイトをご紹介させていただいたのですが、見れなくなってしまったサイトなどもありましたので、今回2012年度版として優良なwebサイトを紹介しているWebデザインまとめサイト(国内・海外サイト)や見出しやナビゲーション・ボタン・バナー・制作に役立つサイトを追加分も含めてまとめました。 国内編 strai... 続きを読む
名刺作成の参考になるクリエイティブでかっこいい名刺が載っているサイト集めました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
最近会社に所属している人も活動用の個人の名刺をいただくことが多くなりました。 ネットでデータを送ると名刺が送られてくるようなサイトも多くなってきましたし、紙も結構選べるので手軽に作るのに便利ですよね。 細かい知識がなくてもベースのイラレデータにレイアウトすれば、お店の方で作ってくれるので楽々でした。 僕も会社用の名刺の他に3つのブログのURLをまとめた名刺を作ろうと思って名刺の参考にかっこいい名刺... 続きを読む
国内のFlashライクなJSのアニメーションを使用したサイトをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
最近はjsのスクリプトやCSS3のアニメーションを使用してFlashに近い動きを実現しているサイトを最近よく見かけます。 サイトを企画・提案・設計する上で、案件によってFlashとjsどちらを実装するのかは変わりますが、まずはjsでどの程度の動きが可能なのか実例を知っておくことが重要です。 そこで今回は、国内のFlashライクなJSのアニメーションを使用したサイトをまとめてみました。 スマートフォ... 続きを読む
最新の国内のパララックス効果を使用したサイトをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
Flashを使わずにJavascriptやCSS3ののアニメーションを使って、スクロール時に奥行きがある視覚効果を生み出す「パララックス効果」。 最近では国内の企業サイトなどでも使われているのを数多く目にするようになってきました。 今回はそんなパララックス効果(parallax)を使用した最新の国内サイトをまとめてみました。 中にもパララックスじゃなくてスクロールするサイトじゃないか?と思われるか... 続きを読む
PCサイトとスマートフォンサイトをどのように扱うか?国内のレスポンシブウェブサイトをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
海外の企業サイトではレスポンシブルウェブサイトもだんだんと浸透しております。 Responsive Web Design を利用している企業サイトリスト 毎日更新したり、記事コンテンツの多いサイトでは、全デバイスのソース管理や更新が1ソースでできるレスポンシブウェブサイトの導入は一つの選択肢として魅力的です。 また共通のURLを使用することでSEOに強い面もあります。 Webフォントを使用すれば、... 続きを読む
無料で使えるCSS3のwebフォント・Google web fontからシンプルでカッコイイフォントまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
Google Web Fontとは 通常、ブラウザで表示する文字に適用できるフォントは、そのパソコンにインストールされているものだけです。 ところが、Web上のサーバー側にあるフォントを利用して、オシャレなフォントが手軽にデバイスフォントとして利用できてしまうのがWebフォントです。 中でも“Google Web Fonts”では、多数のフォントのリストから好きなフォントの種類・ウエイトを選ぶと利... 続きを読む
flashを使わないでギャラリーサイトや写真ブログを制作する際のデザインが参考になりそうなサイト集めました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
今回は写真をメインにしたダイナミックなサイトや、グリットをうまく使った見やすく整理されたサイトをファッション関係・フォトグラファー・デザイン制作会社を中心に30サイト集めました。 クオリティー高い写真を使用しているので見た目のデザインがかっこいいことは言うまでもないのですが、それだけでなく、HTML5やJavascriptを駆使したFlashのようなユニークな画面遷移の動きのサイトも多く見ている人... 続きを読む
Flashを使わなくてもここまでできる!HTML5で制作された国内外サイトをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
以前「HTML5でサイトを作ろう」のブログの方で“HTML5で制作された国内企業のサイト”をご紹介いたしましたが、最近WEB業界でも大変注目されているということもありここ数ヶ月の間だけでもHTML5化されたサイトが増えております。 そこで今回また新たに見つけた印象的なデザインと動きのあるHTML5のサイトを追加でご紹介していきたいと思います。 前回紹介した記事はこちら http://www.htm... 続きを読む
グラフィック作成の参考になる化粧品業界のデザインがキレイなWebサイト集めました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
国内外の化粧品業界のサイトを厳選して集めてみました。女性をターゲットにしているだけあって各社ともモデルの写真を大胆に使った洗練されたデザインが多く、デザインの参考にもなります。また今回調べた17サイトの中でフラッシュサイト・HTMLサイト・モバイル対応しているサイト・SNSボタンがついているサイトがどのくらいあったか下記にまとめてみました。 Flashのサイト:5サイト HTMLのサイト:12サイ... 続きを読む
最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
パララックス効果とは・・ スクロール時に平面で重なり合う画像を異なる速さで上下や左右に動かすことで奥行きがあるように見せる視差効果を「パララックス効果」と呼びます。css3やjavascriptで実装されているものが多く、このパララックス効果をうまく取り入れることでちょっとユニークなアニメーションを表現できます。このパララックス効果を上手く利用したWEBサイトを国内・海外ともにまとめて紹介します。... 続きを読む