タグ

Designとweb制作に関するponnaoのブックマーク (16)

  • デザイン作業のスピードアップ

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。

    デザイン作業のスピードアップ
    ponnao
    ponnao 2013/06/06
    モノクロで最初に構成するというのは目ウロコ。迷走しちゃってやり直す時とかにはいいかもなぁ。
  • CMYKラヴな方へのRGB補正のすすめ(追記あり) – やもめも

    このエントリーは最新版があります。こちらもどうぞ 『まだCMYKで消耗してるの?〜大幅な色補正をCMYKで行ってはいけない理由〜 – やもめも』 いいわけ 印刷関係の方とお話していると、「とりあえずCMYKでないと感覚が掴めないよー」という方が多いかな、という印象を持ちました。WEBの人や合成大好きな方には今更なのでしょうが、ここではRGBでの補正を簡単に説明しようと思います。異論反論たくさん出ると思いますが、これをきっかけにRGBで触って慣れてもらえれば、というエントリですのでお手柔らかに。入ったJPEGをまずCMYK分解してから補正するぜ!な方向けのエントリです。 なぜRGBか フィルタが全部使えるぜ!とかいろいろ利点はありますが、印刷業に限って言うと きちゃない写真をいじくるのが楽になる! とりあえずものは試し、同じ写真(暗いやつ)のCMYKとRGB版を用意して、トーンカーブで明るさ

    CMYKラヴな方へのRGB補正のすすめ(追記あり) – やもめも
  • 極端に低い単価や無料で仕事をしてはいけない、いくつかの理由

    長文を書ける場所がここにしかなかったので。 「経験が乏しいから」「実績を得るために」「自分を鍛えたいから」そう言って、極端に低い単価や無料で仕事を受けているフリーランスの人達をちらほらと見かけるようになり、ずっと違和感を覚えていたのでたまにはこんな話しも書いてみようかなと。 なぜ極端に低い単価や無料で仕事をしてはいけないか ゼロ円で受けた仕事の価値は、所詮ゼロ円の価値しかないから 「とにかく実績を増やしたいから」と安易に無料で何でも引き受けても、それは当の意味での実績にはつながりません。無料で仕事を発注してくる人は、あなたが「無料で引き受けてくれる」事を最大の価値として捉えている場合があります。 また、極端に低単価や無料の仕事は、クライアント自身のモチベーションも低い事が多く、「提供される資料や画像の品質が低い、公開後の運営の品質が低い」なんて事も。品質の低い実績を量産しても評価してくれ

    極端に低い単価や無料で仕事をしてはいけない、いくつかの理由
  • iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design

    いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns

    iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
  • ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 | HTML5でサイトをつくろう

    ほとんどCSSは変えずにxhtmlHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 xhtmlHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素(タグ)の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回のまでエントリー】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編 :HTML5のマークアップ】 HTML5のアウトラインって何?xhtmlHTML5のコードを比較してアウトラインを理解しよう!【初級編 :HTML5のマークアップ】 HTML5では要素やCSSの設定の仕方でいろいろな考えがありますので今回のソース

    ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 | HTML5でサイトをつくろう
  • まったくのゼロから、Webデザイナーになる方法 - ウェブデザイナーになるには

    この記事は2011年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」(2015年3月) 前にも「独学でWebデザイナーになるのにまずやること」というエントリーをかいたが、簡易的な内容だった。 今回も大筋の考え方はかわらない。Webデザイナーになるには、たくさん作品を作って人にみてもらうことである。 今回はもっと踏み込んで、全くの未経験の人がどうすればWebデザイナーになれるのかの具体的なステップ(行動プラン)をまとめてみたい。すでに学校やスクールでWebを学んでいる人や会社でデザイン部門をあらたに設立したい人にも役に立つだろう。 ステップ1 制作環境をつくる まず最初にやることは制作環境を揃えることである。以前だと、FAXとスキャナーは必須だったが、いまは

  • 素人っぽいデザインから脱却するための12のデザインチップス | webox blog

    クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ

  • インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35

    2017年7月14日 Webデザイン, インスピレーション 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します! ↑私が10年以上利用している会計ソフト! Web制作会社のサイトの特徴 Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。 制作実績 多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。 スクリーンショット クライアント名 制作したサイ

    インスピレーションの宝庫!Web制作会社のポートフォリオWebサイト35
  • WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編:24サイト+追加2] | HTML5でサイトをつくろう

    皆さんいつもWEBサイトのデザインをする際に何を参考にしていますか? 気にいったサイトがあったらブックマークをしてストックしておく、WEB系のを見る、あとはWEBサイトのまとめサイトを見るですよね? 自分もまとめサイトを見つけるとブックマークして定期的にチェックしていたのですが、いろいろなまとめサイトがありましたのでまとめサイトをまとめてみました。 このほかにもこんななのがあるよというのがありましたら是非教えてください。 TheFWA http://www.thefwa.com/ High Floater http://www.highfloater.com/ ABM | AnotherBookmark™ – Webデザインブックマークサイト http://www.anotherbookmark.com/ Webデザインのリンク集 Webデザインポータルサイト S5-Style http

    WEBデザインの参考にしているまとめサイトをまとめました[ほぼ国内編:24サイト+追加2] | HTML5でサイトをつくろう
  • 新着記事

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

    新着記事
  • WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々(主にデザイン系) | バンクーバーのうぇぶ屋

    ※煮詰まる× → 行き詰る○ なんかおもいっっきり日語間違って使ってました。めっちゃごめんなさい>< 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ

  • ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方

    あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ

  • 中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス

    Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ

  • シンプルでフリーな使えるCSSのレイアウト集715:phpspot開発日誌

    715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集715が紹介されています。 1から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト

  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • lpo-consulting.com

    lpo-consulting.com 您正在访问的域名可以转让!This domain name is for sale! 一口价出售中! 域名Domain Name:lpo-consulting.com 售价Listing Price:CNY 888.00 立即购买>>    BUY NOW>> 通过金名网(4.cn) 中介交易 金名网(4.cn)是全球领先的域名交易服务机构,同时也是Icann认证的注册商,拥有六年的域名交易经验,年交易额达3亿元以上。我们承诺,提供简单、安全、专业的第三方服务! 为了保证交易的安全,整个交易过程大概需要5个工作日。 具体交易流程可“点击这里”查看或咨询support@goldenname.com。 我要购买>> Process Overview: 4.cn is a world leading domain escrow service platfor

  • 1