デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
ガーリー好きがお届けするガーリーデザインのポイント5つ ｜ Kana-Lier カナリエ
ブログがとってもガーリーだね、と嬉しいお言葉を頂くことが多いKanaです。 とっても可愛いガーリーなデザインは、作っていても見ていても幸せな気分になるので大好きです。 そんな私がガーリーデザインをする際、気をつけているポイントをご紹介します。 1.配色は甘く、優しく。スイーツのような彩りを。2.テクスチャを利用して、やわらかさや、素材感を加えてみる！3.パターンを使うだけでガーリーに！ストライプとドットが素敵！4.安定感よりも、繊細なイメージを意識する。5.かわいい小物をコラージュしたり、装飾を加えて、可愛らしさをアップ！ 1.配色は甘く、優しく。スイーツのような彩りを。 ガーリーデザインの配色を考えるときは、甘く優しい色使いを意識しています。 今ひとつピンと来ない時は、googleの画像検索でスイーツ、ケーキ、マカロン、アイスクリーム、ジェラート等を検索しイメージを沸かせます。 私が好き
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
Webサイトの作り方のまとめ！トップページ完成まで。
サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3（+α）回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン／おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道：サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines（埋め込みタイムライン） トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
creatorish.com
Buy this domain. creatorish.com 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き
Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
ロゴとか作るときに使える地味なテクニック - 3ping.org
ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。 FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。 次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。 中間色ではそれほど変化はみられませ
フリーの超クールCSSグラフまとめ１０個:phpspot開発日誌
DHTML Site - Free CSS Graph Resources Generators Often in web-based applications, developers want to be able to display on the fly graphs. フリーのCSSグラフまとめ１０個が紹介されてました。 CSSでいろいろとできるものですね。 Ajax MGraph PlotKit CSS Javascript Bar Charts Vertical Bar Graphs with CSS and PHP CSS For Bar Graphs CSS Vertical Bar Graphs Displaying Percentages with CSS Dynamic Pie Chart with CSS Real World Bar Graphs (with so
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA