1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

現在アイコン 選択中(※12個まで選択可能) すべてクリアする select size 16px 32px 48px 64px 128px 256px 512px select file type PNG JPG SVG

Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。 そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう！と決めました。 私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。 関連記事 デザインは2年でどのくらい向上するものなのか。（ビジュアルはウソつかない） - IT系女子ログ Webデザイナー2年目を、まるっと棚卸し［デザイン編］ - IT系女子ログ デザインが仕上がらず炎上 デザインとはとても難しいのだと痛感 デザインを追求する、という覚悟を決める デザインと向き合い続ける 他責でなく自責で考える 制限があるから、デザインがより重要になる デザイナーが提案してもいい 良いデザインをたくさん知

こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を

今回の記事では、ランディングページのUIをテーマにデザインについて考えてみたいと思います。 ご存知のとおり、UIデザインの定義は広義にも狭義にもさまざまな解釈があります。この記事では、UIデザインを『ユーザーのアクションを起こすためのデザイン』という解釈のもと、考えてみたいと思います。 では、ランディングページの場合で言う『ユーザーのアクションを起こすためのデザイン』とは何かというと、『操作のためのデザインパーツのUIデザイン』という点が主になるかと思います。まずは、『操作』という観点からUIデザインを考えてみます。 操作のためのUIデザイン 主に下記の7つの要素がランディングページの『操作のためのUIデザイン』に当てはまります。 一見、ランディングページというと、たったの1ページじゃないか、あるいは、ページ遷移させる必要性が低いのにそんなにUIデザインなんて必要なんだろうか？と思われるか

フォルダを削除 フォルダを削除すると登録されているデザインやメモは 全てお気に入り登録から削除されますがよろしいですか？

※この記事は2013年5月30日に執筆された記事です。現在では仕様が異なる可能性があります。 こんにちは！デザイナーのタカハマです。今回はデザイン速度を「神速」に近づけるための秘策「Photoshopオリジナルショートカット設定のコツ」をご紹介します。 デフォルトのショートカットだけでは神速には遠い Photoshopには作業効率を高めるためのショートカットが沢山用意されていますが、デフォルトのショートカットだけでは少し物足りない部分もあります。 日頃の業務でよく使うコマンドがあれば、オリジナルショートカットとして、追加しておくことをオススメします。 ささやかな「秘策」ではありますが、チリも積もれば効果は絶大です。 ちなみに、デフォルトショートカットのチートシートはこちらのサイトで紹介されています。 カスタマイズは簡単4step ショートカットは次のやり方で簡単にカスタマイズできます。 「

こんにちは。ほっぺたと髪の毛は柔らかい方がいい、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕は天然パーマの髪質なのですが、大変ですよね、くるくる、ごちゃごちゃしてて。至ってシンプルな、癖のない髪質に生まれたかったですほんと。 そんな僕はシンプルなデザインに惹かれます。それはなぜか。 どんなデザインも元を辿れば「点」と「線」から作り上げられているからです。 どんなに優れたデザインであっても、原点を見つめ直してみると、すごくシンプルな物から作り上げられています。 そこで今回は、日本ではまだあまり例のない、線デザインを取り入れたサイトを厳選してまとめさせていただきました。 線デザインのまとめが他になかったので、この記事がみなさんの参考になればと思います。 それではいってみましょう！ 注目されること間違いなしの線デザインサイト 1. BrightMedia https://bri

ログインフォームって以外に作る時考えませんか？ 要素が少なくなれば少なくなるほど、レイアウトをどうするか、どうやって目を引くのか、jQueryなどを使うべきなのかと、迷ったり、考えたりすることは多いと思います。 そこで今回はログインフォームの機能的な物からデザイン的な物まで僕がこれまで参考にさせて頂いたサイトをご紹介。基本英語サイトですがサンプルとか置いてある物も多いので何かの参考になると思います。 DW Premium: A Clean & Stylish Login Form (PSD) [scshot url=”designwoop.com/2011/06/design-freebie-a-clean-stylish-login-form-psd/”] キレーな感じのログインフォームサンプルPSD。 Build An Incredible Login Form With jQuery

急成長中のモバイルショップを運営するグッド・クルーさまの採用（求人）ランディングページをデザイン制作いたしました。 会社説明会の予約促進（＝人材採用） モバイルショップの運営で急成長中の同社の人材採用を促進するため、マーケティング会社ADX様と共同してランディングページを制作。2年間という期間限定の契約社員採用で得られる体験価値を伝えるために、同社で働くことで得られるスキルやチームで働くことの一体感、その後のキャリアが分かる採用ランディングページに。 働くスタッフやオフィスの写真をふんだんに使ったり、キービジュアルにスライドを使用したり、社風と働く楽しさが伝わるデザイン 伝えたい情報をページ上で散らさず、センターにレイアウト 視認性を上げるために文字を大きくし、デザイントーンも若い人を意識しライトな感じに ところどころ写真を大胆に使い、より社風や雰囲気を出すデザインに 各セクションにテーマ

ARTICLE - No.15 issue-2015.5.30 update-2015.11.29 10,598 views Posted by Keisuke Aratsu POP1280 最近見たwebサイトの中で情報整理やクリエイティブのバランスがいいと感じたサイトをご紹介します。 今回は全部で3サイト、どれもいいと思って何回もサイト訪問してしまったサイトばかりです。どれも甲乙つけがたくいいサイトで、自分も真似したくなるものばかりでした。 熊本県阿蘇郡小国町 杖立温泉 熊本県阿蘇郡小国町の温泉街のwebサイト。 昔ながらの風情ある温泉街の雰囲気を伝えるのがコンセプトなのか、レトロなデザインで統一されています。 トップページは情報量がそこまで多くない分、ナビゲーションをヘッダーに固定していつでも下層ページにアクセスできるようになっている、ユーザーには親切な設計だと思います。 このサイト