ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
知らないと損！ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編
Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメ本を紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で！ 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに！ など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載！ Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条
新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」
アイコンで表現されることも多い人の顔のビジュアル。同じテイストで何種類も描き出すのはとても大変な作業になってしまいます。そんなシーンに是非利用したい、1,000通り以上の組み合わせが可能なフェイスアイコン「Avatars and Emoticons Vector Set」を今回は紹介したいと思います。 いろいろな表情や髪型のフェイスアイコンが簡単に作り出せるパーツがセットになった、とても便利なフリー素材です。 詳しくは以下 セットになっているのは、帽子やメガネなどの装飾パーツ、目・口・鼻の多彩な表情が楽しめるバリエーションパーツ、女性・男性のいろんな髪型パーツ、フェイスラインパーツ。好きなものを選び重ねていくことで、人のフェイスアイコンが完成します。ユニークなデザインのパーツが多く、楽しみながらフェイス作りを楽しむことができそうです。 他にはあまりない貴重な素材だと思いますので、オリジナル
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
もうフローラルな素材には困らない！背景やエレメントで使えるフローラルなベクター素材のメガパック
個人でも商用でも無料で利用できる、高級感のあるしっかりとデザインされたフローラルなベクター素材を紹介します。 そうです、当ブログでもお馴染みのfreepik.comの新作です。
スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術
作成：2014/03/17 更新：2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 １．イラスト作成のスキル ２．写真の撮影技術と知識 ３．動画編集の技術 ４．コピーライティング ５．モーショングラフィック ６．電子書籍の作成 Webデザイナーの基本知識とスキル ７．UX・UI・IAの知識 ８．レイアウト基本原則 ９．配色＋色彩計画 １０．フ
新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法｜MarTechLab（マーテックラボ）
LPO研究所の鳥居です。 「イメージしてたデザインと全然違う」 「これじゃ売れる気がしないんだけど」 「ちゃんと頭使って考えてんの？」 突然ですが、あなたは日常的にこんなことを言われていませんか？ 今の職場でWebデザイナーとして働きはじめてはや７年。私は、今では後輩デザイナーの育成も行う立場なのですが、新人が先程のようなセリフを言われるのを毎日のように目にしています。 無論、私自身も新人の頃はこっぴどくやられました。 今なら分かることですが、これは 新人Webデザイナーが共通して「取るべきコミュニケーション」を取っていないから起こるトラブル なのです。 あなたは今、デザイン制作におけるコミュニケーションに自信を持てていますか？ もしかすると今この記事を読んでいるあなたは「Webデザイナー」ではなく、クライアントから要望を聞く「営業」や「ディレクター」の立場かもしれません。 しかし基本は同
プレゼン資料のデザイン力がぐっと上がる、お勧めのデザインサイト7選 ｜プレゼンデザイン
プレゼン資料をキレイにわかりやすく作りたい！と思い立った人に、まずお勧めしたいのがこのサイト「伝わるデザイン｜研究発表のユニバーサルデザイン」です。基本的には研究発表を行う学生さんをターゲットとしているサイトですが、ビジネスマンにも読み応えは十分。提案書・企画書のプレゼン資料作成にそのまま利用できる内容となっています。 魅力は、わかりやすいサンプルと豊富な解説。デザイン初心者にうってつけのサイトです。ページはすっきりとしていて非常に見やすく・読みやすくレイアウトされています。 サイト全体の情報量も多からず少なからず、ほどよく網羅されていて、ひととおり目を通し終わった頃には、一歩レベルアップしている自分に気づくこと間違いありません。百聞は一見に如かず。まずはご覧になってみてはいかがでしょうか?
『難しくないデザイン効率化のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド（仮）でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは？ と、なかなか一筋縄ではいかない問題です。 ガールフレンド（仮）デザインチームの場合、1年目～3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう
ハイクオリティかつ無料のテーマ配布サイトBootstrap Zeroが凄すぎる！ - ku-sukeのブログ
無料なのにこのクオリティヤバイ！！ Bootstrap Zeroはその名の通り、Bootstrapをベースにデザインされた美しいテーマが無料で配布されているサイトです。 これまでもStart BootstrapとかBootswatchとか無料のサイトが合ったのですが、無料だけあって有料のテーマと比べるとちょっとベーシック感が否めない状況でした。 ところがこのBootstrap Zeroはかなりクオリティが高いテンプレートが多いです。自分でデザインする人のためのStarterから、そのまま使えるデザイン済みのThemes、さらにFacebook風やGoogle+風、Android風などもあってかなりのクオリティっぷり！ それではいくつか御覧ください。 Starter 本家のexampleにひと手間加えた感じです。 Themes こちらは気に入ったものを幾つか Admin 管理画面で使える！！
ウェブデザイナーの勉強にいい！デザインの基本原則からPhotoshopの実践的なテクニックまで学べる無料のeBook -Pixel Perfect Precision 3
デザイナーさん・ディレクターさんをはじめ、ウェブデザインに携わる全ての人に必携です！ デザインの基本原則をはじめ、Photoshopを使った実践的なさまざまなテクニックが学べるeBookを紹介します。無料なのに市販の書籍に負けない、いや人によってはそれ以上の価値ある内容がぎっしり詰まってます。 Pixel Perfect Precision 当ブログでもお馴染みのPixel Perfect Precisionの第3版が、昨日リリースされました（パチパチパチパチ） 内容も大きくバージョンアップし、ページ数も165ページから214ページへと大増量。 デザインにおける、配置の基本原則、可読性を考慮したテキスト、カラーマネジメントなどをはじめ、ファイルの効率的な管理方法、Photoshopでのウェブに最適な初期設定、レイヤー管理、Illustratorのウェブで使える実践的なテクニックなど、満載の
WEB業界で働きたい人必見！現場で役立つツールを一挙ご紹介 | DX.univ
Web業界で働きたい人や独学で勉強しているWeb初心者の方は必見！Photoshopやテキストエディタの拡張機能やブラウザのアドオン等、Webデザイナーが日常的に使用している現場で役立つツールを一挙ご紹介します。これを読んで脱Web初心者！最近、Mac USキーボードを買った24-7水野です。 ←こんな顔していますので、是非覚えてやって下さい。 現在所属している24-7が、私にとってWeb業界で働く初めての会社です。入社前はスクールには通わず独学で勉強していました。当時は不明な箇所や業界標準として使用されているツールが分からず、また周りに質問出来る人がいない環境だったので様々なブログ記事やTipsを読み勉強していました。 そこで今回、独学でお困りの方向けに私が使用しているソフトやツールを紹介することで問題解決が出来たり、Web業界に興味を持っている方の参考になれたら幸いです。 デザイン制
模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの藤田です。 「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。 日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。 そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。 そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。 なぜトレースがデザインの上達につながるのか？ なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。 「デザインは細部に宿る」と言われますが、その細部に気付く 「デザインの引き出しが増える」 「自分の悪い所が解る」←これが一番重要！ などなど、良いことがたくさんあります。 まずはカッ
シンプルなデザインに最適 フリーWordPressテーマ「Minimal and Clean Free WordPress Themes」
TOP > WordPress > シンプルなデザインに最適 フリーWordPressテーマ「Minimal and Clean Free WordPress Themes」 手軽かつスピーディにwebサイトを構築できるWordPressは、フリーで使用できるテーマが数多く配布されています。そんな中今回紹介するのは、シンプルなデザインに最適な「Minimal and Clean Free WordPress Themes」です。 （Structure Theme | WordPress Templates | Organic Themes） ミニマルかつクリーンなイメージのWordPressテーマがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 BlueBubble WordPress Theme — Flexible7 – De
なにこれ超便利！レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然！Adsenseの確認にもなるよ！ | なまら春友流
当サイトはレスポンシブデザインを採用している。 それに合わせて最近GoogleAdsenseのコードをレスポンシブ対応のものに変更した。 その際に面倒なのが、広告が自分のサイトでどう表示されているのかの確認。 キャッシュが残ってたり表示させるガジェットを持っていなかったりという問題があってなかなか簡単に確認できなかったけれど、そんな悩みを一発で解決してくれる便利サイトがあったのでご紹介。 http://mattkersley.com/responsive/ ↑ 上記サイトで自分のサイトのURLを入力すれば各デバイスでどのように表示されるか確認できる。 レスポンシブ対応のAdsenseもそれぞれの大きさに合わせて表示されるのでわかりやすい。 個別ページのURLを入力すればそれぞれのページも表示されるので、トップページと投稿ページのカラムや表示を変えている人にとっても重宝する。 うん、これは便
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
