『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
こんにちは、デザイナーのまきこです。 9月に入って、なんだかすっかり秋めいてきましたね。わたしの夏はどこにいってしまったのでしょうか……。 と、憂いてばかりはいられません。秋といえば、食欲の秋! ということで、今回は、食欲の秋にぴったりのおいしそうなデザインのサイトを、おいしそうに見せるテクニック別にご紹介します! 「ググってわからないこと」が一瞬で解決するかも? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します! ▼少しでも気になる方は、ぜひ公式サイトをご覧ください! ※ 2015年9月11日に公開された記事を再編集したものです。 写真でダイナミックにみせる 素材や料理をしっかり見せたいときや、写真のクオリティーにこだわることができるときにお
Webサイトの制作料。機能、デザイン、コンテンツ、ページ数によって大きく異なることは容易に想像できますが、一般的な中小企業がデザインを頼むとしたらいくらかかるのでしょうか? チラシのデザイン料を調べた前回に引き続き、実際に料金表を公開されているデザイナーやウェブ制作会社を検索してみて、フリーランスやSOHOの方を中心に100社ほどまとめてみました。今回も、会社名とURL、料金表部分のスクリーンショットを掲載しています。 ウェブ制作のお仕事で独立・開業したばかりの方や、する予定の方にとっても、いくらチャージすればよいのかを考える際の参考になれば幸いです。 追記:現在、広告用バナー、LP(ランディングページ)、アプリ用アイコンなどの制作料金についても調べています。興味がある方は、公開時にお知らせが届きますので、もし良かったら読者登録していただけますと幸いです。 アルファーム http://al
【厳選】Webデザインのスキルをアップさせるために読んでおくべき参考書7冊 世の中にはWebデザインに関する参考書が数多く刊行されており、Webデザインを学ぶ環境は十分すぎるほど整っています。Webデザインのスキルを向上させるために読んでもらいたい、オススメの参考書を7冊厳選してご紹介ます。 タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック タイポグラフィを学ぶならこの一冊。 文字組みを美しく見せるための基礎知識からテクニックまで、分かりやすく教えてくれます。 本書を読んでタイポグラフィを理解すると、微調整によってフォントの見栄えが全然違うことに気づきます。 タイポグラフィはWebデザインを美しく見せるための必須のスキルです。 http://www.amazon.co.jp/gp/product/4797359226/ デザインのルール、レイアウトのセオリー シンメト
Webデザインのセンスをアップさせるには、一つひとつのUIを観察し、考えてからPhotoshopを起動し、作業をすること。最近のトレンドをうまく取り入れたレイアウトや配色・タイポグラフィの参考になるPSDがダウンロードできるUI素材を紹介します。 縦長ページ用のさまざまなコンポーネント、斜めやサークルや幾何学を使ったもの、Material Design、ミニマルなど、参考になるものばかりです。 EventRay UI Kit (PSD) イベントやアクティビティの情報を管理するさまざまなGUIエレメントが揃ったUIキット。情報の取得や通知をはじめ、コメントやフィードバックやシェア、管理や販売などユーザーのインタラクションを容易にするようデザインされています。 Awesome UI Kit for Free (PSD, Sketch, Axure, Omnigraffle) ヘッダ、フッタ、
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
ブログやウェブサイトを作っていると「こんなイラストあるといいんだけどな」と思うときがけっこうあるのですが、イメージどおりの無料イラストや、アイコンなど探すのってけっこう時間がかかりますよね。 ブログやHPだけでなく、ハガキや年賀状、暑中見舞い、クリスマスカード、チラシなどを作るときも同様ですよね。 ここでは、ブログやホームページ、チラシ、ポスター、ハガキ、年賀状など、商用利用OKで、おすすめの無料イラストサイトをまとめてみました。 無料イラストのIMT(弊社サイト) 「無料イラストのIMT」は多くのイラストレーターさんが登録してイラストを提供しているので、さまざまなタッチのイラストがダウンロードできます。 きっとあなたのイメージするイラストも見つかると思いますよ。 イラストはJpg(高画質)はもちろんPng(背景透過)、Psd(フォトショップ)、Eps(イラストレーター)でダウンロードでき
「どうすればこの商材の魅力を最大限に伝えるバナーができるの?」 このような悩みを持つデザイナーさんはたくさんいらっしゃると思います。 よくある「バナーデザインまとめ」のようなサイトを閲覧してもイメージ別のデザイン(配色やフォント)の特徴が見えず、毎回まとめサイトを参考にしていると作業がなかなか進まず、イライラすることもあるでしょう。 そんな方のために今回は訴求したいイメージ別のバナーデザインの特徴をお教えます。 「安心感や信頼感」「誠実さ」「かわいい」「お得感」「先進性」など訴求したいイメージごとに最適なフォントや配色、その他の特徴をまとめて紹介していますので、ご自身が制作したいバナーのイメージに合わせてご覧下さい。 コンバージョンする!高品質なバナー作成方法 【はじめに】デザインイメージ図今回は日本カラーデザイン研究所の配色イメージスケール図をベースとしてイメージ別のバナーデザインをまと
フリーランスをスタートして半年以上が過ぎて、まだまだ月々の売上は売上報告にも書いている通り、多い時と少ない時の差がかなりありますが、ありがたいことに仕事自体は次第に増えています。 そうするとしっかりと考えておかないといけないのが、デザイン料金の設定です。これまではクラウドソーシングでのコンペや受注案件など、価格が決まっているものに応募したり、受けたりする流れでしたが、これからクライアントや代理店の方と直で料金の交渉をしたり、見積書を提出することが増えていきます。 そこで改めてその中のデザイン料金の相場について考え、まとめてみました。 デザイン料金で揉める場合 サバイブログでは過去に「デザインのクオリティと値段の関係をハッキリさせておこう」、「【クラウドソーシングも含む】プロに低料金の案件を気持良く、しっかり仕事をしてもらうコツ」という記事で、デザインとお金の関係に関しては色々と思うところを
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント(480px)を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか? 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性
2014年4月22日 Webデザイン, インスピレーション 「デザインのアイデアが浮かばない…」「今人気のデザインはなんだろう?」なんだか行き詰まったなーと感じたら、息抜きも兼ねてデザイン系のコミュニティーサイトを覗いてみましょう。多数の洗練されたデザインから刺激を受けることができます。とは言えいつも眺めているだけではなく、その輪に入ってみると、また違った角度から作品を見つめることができますよ。今回はフォローやお気に入り機能のある、デザイナー向けのコミュニティーサイトをいくつか紹介します。4月から新しく入った新人さんも必見!自分用のノートだと思って少しずつ投稿してみましょう。 ↑私が10年以上利用している会計ソフト! Behance オンラインポートフォリオサイトとして、全世界で大人気のBehance。完成度の高い作品がずらりと並び、インスピレーションを刺激されるはず。 国別絞り込み検索も
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く