第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」にて講演。［2014-04-19］ ちょっとした工夫で“普通のテキスト”を“デザインされたテキスト”に変えることができます。今までのWEBデザインではデバイスフォントという制約もあり、DTPと比べるとタイポグラフィはあまり重要視されてきませんでしたが、高解像度のデバイスやウェブフォントの普及などにより、その必要性は高まっています。適切で根拠のあるテキストの扱い方を学び、あなたが制作するデザインに自信つくよう、DTP・WEB両方のデザイン経験を元にタイポグラフィと文字組版の基本を解説いたします。Read less

2013年Web制作に使い始めてよかったツール・サービスまとめ 〜そして時は2014年へ〜 2013.12.19 | この方法お勧めです！ | 初心者向け | 制作あるある 皆様しわっす。WP-Dではジミーな技術系記事を書いてますエメラルドこと井村です。 パープルリーダーから「ゆく年くる年」というお題をいただきまして、たまにはまとめ記事的なものを書いてみたいと思います。 日々新技術に猛進する猛牛のような制作者の皆様には役に立たない記事だと思うので、日本酒でもたしなみながらくるくるスクロールしていただければこれ幸いであります。 個人的な話になりますが2013年3月に独立しまして、制作環境なども自分の好きな物を使うことができるようになりました。またフリーランスにとっては作業効率が自分の手取りに直結するので、作業の自動化・効率化は死活問題でもありますよね。 紹介しているツールやサービスは2013

2013年12月17日 Photoshop, 便利ツール デザイナーにはかかせないツール、Adobe Photoshop。Creative Cloudになってどんどん便利になってきましたね！そんなPhotoshopをさらに使いやすくしてくれる無料プラグインが多数配布されています。私はPhotoshop CC ver. 14を使用しており、そのバージョンで使えるプラグインを中心に紹介していきます！ ↑私が10年以上利用している会計ソフト！ Photoshopプラグインの使い方 最新版のAdobe Extension Managerをダウンロード＆インストール ダウンロードしたPhotoshopプラグイン（.zxpファイル）をダブルクリック 自動的にAdobe Extension Managerが起動するので、そのままプラグインをインストール。自動的に起動しない場合はAdobe Extensi

Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日本語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム（Webページの右レールとも呼ばれる）を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20％程度だが、ピクセルとはコンピュータ

2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう

Webデザインを勉強する時に参考にしたいまとめサイト・記事25選 Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事・小技テクニックを集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…

さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った

2013.08.18 GunosyのUIを徹底的に分析してリデザインしてみた この記事は以下に移転しました。 http://lambda-structure-design.jp/lab/redesign-of-gunosy-ui/

box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな

近年ウェブデザインに関する様々なテクニックや理論が注目されているが、ユーザーを引きつけるデザインとはなんだろうか。意識してこのサイトのデザインが好きだからと選ぶ人もいるが、大抵の人は無意識に感覚で選ぶことが多い。 私がデザインを勉強していて思うことは、無意識に選ばれるデザインこそが一般ユーザーから見た客観的なユーザビリティを理解したデザインができていると思う。使いやすさはユーザーに選ばれる一番の理由である。 さらに、彼らの心をつかむには感情に訴えるデザインも大切である。論理的に文字で訴えることも大事だが、ビジュアルなどを使って感情に訴えるデザインはサイトを見ている人との距離を縮めることができる大切なポイントである。 選ばれるウェブデザインはいくつかの点に注意すれば作ることができる。その為には今から紹介する９つの基本的なルールと感情に訴えるデザインがキーポイントとなる。 1. ゴールを明確に

かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い

こんにちは。今日も元気にPhotoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労しました…Photoshopの文字詰め♪ 基本的なことがほとんどなので、知ってる人にとっては当たり前のことですが、おさらいによろしければご覧ください。 それではどうぞ！ ちょっと待って文字詰めって何？ まずは文字詰めが何か分からない人の為に軽く説明しておきますね。 ワンランク上のデザインにはかかせない文字詰め 文字詰めとは読んで字のごとく、文字と文字の間を詰めてバランスをとる作業のことです。 通常文字を打っただけでは「ベタ組み」と呼ばれ、基本的に文字と文字の間が空きすぎています。それを詰めてデザインのバランスをとります。 WEBの性質上テキストデータの文字詰めは難し

デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

フォントをクリエイティブに表現できる Photoshopチュートリアルまとめ「40 Fresh And Creative Photoshop Text Effects Tutorials」 CG要素の強いデザインを制作するためには、Photoshopなどの画像処理ソフトを利用することが不可欠ですが、表現方法が多岐にわたる分、その技術を余す事なく利用できていないという方も多いのではないでしょうか？そんな中今回紹介するのは、フォントをクリエイティブに表現できる、Photoshopチュートリアルまとめ「40 Fresh And Creative Photoshop Text Effects Tutorials」です。 Create a Glowing Liquid Text with Water Splash Effect in Photoshop – PSD Vault 立体感のあるクオリティ