タグ

webデザインとWebデザインに関するteruka0917のブックマーク (40)

  • 配色を考えるときに便利なオンラインツール10個集めてみました | WP-E (仮)

    最終更新: 2018年4月14日 皆様こんにちは!最近WP-Eメンバーに名を忘れられているような気がするWP-E HINOTANです。寿司ネタがどこかへ行ってしまいましたね。 さて今回はタイトルの通り、便利な配色ツールを紹介していきたいと思います。 Adobe Kuler まずはAdobeが提供しているAdobe Kulerから。こちらは有名なので知っている方も多いと思います。Adobe KulerはPhotoshopやIllustratorとの連携機能があるので便利です。(Adobe Creative CloudのアカウントIDが必要となります) 「Explore」のページでは、様々なカラーパターンを見ることができ、気に入ったものを登録したり編集したりすることができます。登録したカラーパターンはPhotoshopやIllustratorにも反映されます。 Color Hexa Colo

    配色を考えるときに便利なオンラインツール10個集めてみました | WP-E (仮)
  • Photoshopの「スナップショット」を使って効率の(・∀・)イイ!!作業をしよう

    creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近は神速Photoshop[Webdesign編]を読んで、ますますPhotoshop愛が深まっております。井畑です。 今回はPhotoshopのヒストリー機能の1つ「スナップショット」について説明します。Photoshopを使っていて割と使うことが多い「ヒストリー」ですが、最近までこの「スナップショット」について知りませんでした。 使いこなせば結構便利なので是非チェックしてみてください!!それではご紹介します。どうぞ! その前にPhotoshopの「ヒストリー」について 知っている方も多いかもしれませんが、スナップショットの前に「ヒストリー」について簡単に説明します。 「ヒストリー」はその名の通りPhotoshopで行った作業を前の状態

    Photoshopの「スナップショット」を使って効率の(・∀・)イイ!!作業をしよう
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • 是非ストックしておきたい フリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」

    TOP  >  Design  >  是非ストックしておきたい フリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」 常に新しいデザインのものがリリースされるアイコン。主流のフラットデザインから、立体感のあるデザインまで、いろいろなタイプが登場しています。今回はそんなフリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」を紹介したいと思います。 (Dribbble – Outline Icons Part 3 by Adrian Goia) さまざまなデザインシーンで活用できる種類のアイコンが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Tab Bar Icons iOS 7 Vol3 | Media Icons | Pix

    是非ストックしておきたい フリーアイコンセットまとめ「20 Fresh and Beautiful Icon Sets for Free」
  • Photoshopでの作業がはかどる!ウェブデザイン(特にスマフォ)用の効果的な環境設定のまとめ

    Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R

  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

    作成:2014/04/21 更新:2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び 1.今までの回り込み解除 2.横並びや並び順 3.均等に並べる/段組み ナビゲーションメニュー 4.多階層 ドロップダウン 5.amazon風 メガドロップダウン 6.ドロワーメニュー コンテンツメニュー 7.モーダルウィンドウ 8.アコーディオン 9.タブパネル テーブル 10.ストライプテーブル 11.レスポンシブ+テーブル リスト 12.カウント

    すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ
  • フリーフォントの樹 - 無料フォント配布中

    無料の刻フォントを、デザイナー・クリエイター、すべての人へ 刻フォントは、一字の中に意味を内包する漢字と、それ単体では意味を成さない仮名文字を、根的に別のものとしてデザインしたらどうなるだろうという 知的好奇心から作成が始まりました。 いわばアルファベットの大文字と小文字の関係のように、両者は全く別の存在と割り切った中で字面の大きさを分別し、 その上できれいに統一感の取れた文字が並ぶようにフォントデザインの試行錯誤を重ねました。 また、それは漢字と仮名の関係にとどまりません。 〈ひらがなやカタカナ・漢字〉と〈アルファベット〉の交わった文章でも、またその雰囲気がぶれることのないよう、 仮名文字の大きさや配置する高さを調整しました。 特に刻明朝は、ギフトに用いる素材にも適したロマンチックな印象のフォントに仕上がりました。 これらのフォントは無料でプレゼントしています。クリエイティブな活動をす

  • 自分のwebサイト作る工程 - MEMOGRAPHIX

    2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ

    自分のwebサイト作る工程 - MEMOGRAPHIX
  • 日本が誇る国内フォトグラファーの素晴らしいギャラリーサイト24選

    フォトグラファーのギャラリーって、見ていて飽きないですよね。 1枚の写真に込められたメッセージを、その場にいないのに写真から感じとれるのは、当に凄い事だと思います。 好きな写真の感じ方は人それぞれの好みによっても違いますが、トップクラスフォトグラファーの写真を見る事は、感動できますし、自らのアップスキルアップにもつながるのではないかと思います。 そこで、国内で活躍されているフォトグラファーが撮影した作品を見る事のできるサイトを集めてみました。(順位不同) (補足:写真集などの発行情報を効率よく入手する方法) kiyo murakami オフィシャルサイト 蜷川実花 ギャラリー、FBページ、写真集 ケント白石 FBページ 伊藤 真司 ギャラリー Natsumi Hayashi ギャラリー、FBページ、写真集 鈴木心 オフィシャル、写真集 城直季 オフィシャル、 SHINYA INABE

  • 最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ

    ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます!

  • 新人Webデザイナーが心がけるべき5つのこと|株式会社アクトゼロ|クリエイティブブログ

    こんにちは。なおです。花粉症が辛いです。 新年度が始まりました。新社会人のみなさまおめでとうございます。そして新Webデザイナーのみなさま、ようこそ!色々不安はありますよね、わかります。そんなみなさまへ、日ごろ心がけると良いんじゃないかという5つのことについて今日は書きます。 その1.情報ヲタクになれ! この業界に入る方々の中でネットに疎いという人はそんなに多くはないと思いますが…。常に新しいことを求めているのがweb業界!なので最新の話題には少しでも強くなっておきましょう。具体的にはフィードを使うのが良いです。気になった情報ブログがあったらすぐ登録!あまりにも登録しすぎて、平日に読めなかった膨大な未読記事を休日に消化する。。。という謎のスパイラルにも陥りがちですけどね。興味がある記事だけぱぱっと読んであとはスルーする、ぐらいでも良いです。 その2.デザインの引き出しを増やせ! デザインを

    新人Webデザイナーが心がけるべき5つのこと|株式会社アクトゼロ|クリエイティブブログ
  • Appleとアイコンの未来を切り開いたグラフィックデザイナーとは?

    コンピューターを使っているとアイコンを目にしない日はないほど、アイコンとコンピューターは切っても切れない関係にありますが、今日使われているアイコンに大きく寄与した人としてグラフィックデザイナーのスーザン・ケアさんが挙げられます。Apple社員として働いていたケアさんですが、彼女が一体何をして、どのようにアイコンの未来を切り開いたかについて、Priceonomicsがまとめています。 The Woman Behind Apple's First Icons http://priceonomics.com/the-woman-behind-apples-first-icons/ ◆グラフィカル・ユーザー・インターフェースの歴史 1984年にMacintoshが発売された時、シンプルで親しみやすいインターフェースが売りでした。しかし、このシンプルなインターフェースが完成するまでには歴史があったの

    Appleとアイコンの未来を切り開いたグラフィックデザイナーとは?
  • 使われていないCSSを探す方法

    Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。 こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。 紹介されているツールは「uncss」とい

    使われていないCSSを探す方法
  • あなたのブログの人気記事が知りたい! ブログのサイドバーに、手軽に人気記事を表示する方法。 - Hike×Hack

    こんにちは! Hike×Hackのかけすけです! 今日はブログについてのお話です。 私は見ての通り「はてなブログ」でブログを書いているのですが、ブログをはじめた当初、困ったことがありました。 それは、「サイドバーに人気記事を表示するにはどうすればいいのか」ということ。(ここでいう人気記事とは、はてブ数が多い記事を表します。) ブログの管理画面で「サイドバー」の編集画面を開くと、「最新記事」の表示については最初から明示されているのですが、「人気記事」についてはまったく触れられていないのです。 どうしたものか。およそ1ヶ月前、私は悩みました。どうすれば人気記事を表示させられるのだろうか。 そんなとき、あることを知ります。それは、はてなブログがしっかりと公式で、「はてなブックマークブログパーツ」というものを私たちに与えてくれているということです。 今日は、その「はてなブックマークブログパーツ」を

    あなたのブログの人気記事が知りたい! ブログのサイドバーに、手軽に人気記事を表示する方法。 - Hike×Hack
  • Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」

    「学校では教えてくれない、89の時短テクニック」「自己流で時間をムダにしていませんか?ウェブデザインをもっとラクに、もっとすばやく」ということで、かなり実践寄りの効率的なテクニックばかりを集めたのが「神速Photoshop [Webデザイン編]」です。ちょうどPhotoshop CC+Lightroom 5が月額980円で使える「Photoshop 写真家向けプログラム」を使い始めたところだったので、しげしげと読んでみてお役立ちっぽいのがないかどうか探してみました。 まず以下が神速デザイン五カ条、「ショートカットを活用しよう」「最新機能を使いこなそう」「目的によってツールを使い分けよう」「「直し」に強いデータを作ろう」「面倒な作業は自動化しよう」ということで、どれもこれもごもっともな感じ。人は放っておくと今までの慣れ親しんだやり方が非効率的であっても「慣れているから」というただそれだけの理

    Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」
  • 知らないと損!ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編

    Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメを紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で! 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに! など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載! Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条

  • 商用無料!日本語も英語も揃えたフリーフォントサイト「fontopo」:SwitchBox

    今回紹介するのは、フリーフォントを配布しているサイト「fontopo」です。読みやすくて使いやすい日フォントや、おしゃれにデザインされた英語フォントがすべて無料でダウンロードできますよ。商用利用も出来て安心して使えるのも嬉しいポイント。

    商用無料!日本語も英語も揃えたフリーフォントサイト「fontopo」:SwitchBox
  • ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ

    「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが当に効果的なのか?ということを調査したのはソ

    ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
  • 新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!

    おはようございます。CD藤です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ!! さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト(以下ブクマサイト)だ!という5サイトを紹介します。 (今回はパソコンサイトを扱うブクマサイトに限らせて

    新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版!