デザインを決めて進めるために必要なこと
先月は東京、そして今月は大阪 で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、その手法がどのような意味を持っていて、それを基にどうゴールに向かって走れば良いのか見えないことがあります。 点は理解できたけど、それをどう線にしたら良いか分からないわけです。 例えば社内ワークショップ
ゴールデンウィークにどうぞ。2013〜2014のWeb&デザイン系書籍14
2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★
Illustratorのブラシを使いこなそう！オリジナルのパターンブラシ作成テクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Illustratorならばだいたいわかる。九州ライターの村上です、みなさんこんにちは。 Illustratorの線をカスタマイズする、といえばアピアランスパネルなのですが、中々考え方が難しくもあるので、初心者の方にはとっつきにくいかもしれません。 代わりに活用できるのが、線をカスタマイズしやすいブラシパネルです。その中にあるパターンブラシは、CCより前のバージョンだと設定がわかりにくいところが難点でした。 今回は、Illustratorで扱うブラシツールの5つの種類とそれぞれの特徴、そしてCCより前のバージョンでのオリジナルのパターンブラシの作成方法をご紹介していきます。 【こちらもおすすめ】 ☞ 手書きイラストをIllustratorやPhotoshop用のブラシにできる「Adobe Brush」入門 Illustratorで扱うブラシツールの種類と特徴 ブラシツールの種類は5つありま
デザインで使う「色」について考えよう Web touch meeting #66
1. 26 April 2014 Aika Kohama | Web Touch Meeting #66 Think about a color 2. 1. いろいろな色の見え方 2. 色覚の種類 3. カラーユニバーサルデザインとは 4. 実際に気をつけたいこと 5. これから必要なこと 6. さいごに Today I’ll talk about… 今日お話すること今日お話すること
ブログを簡単におしゃれにできる背景デザインと CSS 設定方法 | セオリコ
あちこちブログを見てまわると、おしゃれなデザインにしているところがたくさんありますよね。 WordPress でも無料ブログでも、綺麗にデザインされているテーマ・テンプレートを使えば誰でも簡単に見栄えをよくできます。 そこまで大幅に変更するのではなく、既存のデザインのままでちょっと雰囲気を変えておしゃれなデザインにしてみたいなら、シンプルな背景画像を敷いてみるとよいかもしれません。 本記事では「WordPress のカスタマイザーを使う方法」と「CSS で設定する方法」の 2 パターンをご紹介します。 背景画像を設定してイメチェンしてみよう メインコンテンツ（記事本文）の背景色を白にして、まわりの背景色を変えておくと、メイン部分がよりわかりやすくなりますよね。読者も記事に集中しやすくなると思います。 でも、濃いめの色を使ってしまうと圧迫感を与えてしまいます。周囲の余白に気をつけないと、色が
いま、活版印刷が見直される理由とは？ - TYPE
たかがメガネ、されどメガネ突然ですが、メガネ、お使いですか？ はい、あの眼鏡です。私は出かける時はコンタクトなんですが、家ではもっぱらメガネ愛用者ですね。すごく目が悪いので、寝ている時以外はずっとしています。 何個か持っているのですが、いつも使うのは大体決まってます。ちょっと赤っぽい縁の軽量メガネ。黒縁と迷ったのですが、私の場合赤にして正解でした。なんとなくしっくりきてお気に入りです。 皆さんメガネを買うときのこだわりってありますか？私はかけてて痛くならない素材がいいですね。なんせずっとかけてるので、重いとしんどいです。あとはフレームの大きさ。あまり小さいとおかしいし、大きいと重苦しく見えますよね。 メガネ屋さんに行くとあまりに沢山の種類があるので気が遠くなったことありません？私はあります。もうどれでもいい、なんて思っちゃう。でもメガネって、ほぼ体の一部になるものだから、慎重に選ばないとあ
使いやすいスタイルガイドを作るための5つのポイント
by Dave Crosby ウェブサイトのデザインを決める時にページ上のコンポーネントやモジュールをリスト化したスタイルガイドを作っておくと、開発者や他のデザイナーと情報が共有でき便利です。では、どのようにしてスタイルガイドを使うとうまく運用できるのか？ということで、ZURB Universityが5つのポイントにまとめています。 ZURB University | 3 Minute Lessons http://zurb.com/university/library/31 ◆1：サイトを構築するのに十分な情報を含める by Noëmie Haffner 誰が担当してもゼロからウェブページを作れるように、コンポーネントを十分に含ませておき、ガイドラインやコーディングしたUIのパターンなどを書いておくことが大切。全てを説明するのは難しいので、プレビルドのコンポーネントを用いて、HTMLやC
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
見ないと損する便利なデザイナー向けWebサービス13選 | SONICMOOV LAB
こんにちは。 緑のにおいが気持ち良い季節になってきましたね。3月4月は花粉で涙をボロボロ流しながら生活していたのですが、やっと思う存分散歩ができそうです。 さっそくですが、デザイナー・クリエイターのみなさんは、自分の作品やスキルをアピールするために普段どのようなツールを使っているでしょうか？ 現在さまざまなWebサービスが出ており、うまく利用できれば活動や交流の幅が広がるはず！ そう思って今回はクリエイター向けのサービスをいくつかまとめました。 目次 UIアニメーションのヒントに ちょっとしたアニメーションを作るときに参考にしています。動きを眺めるだけでも面白く、インスピレーションがわきます。 CAPPTIVATE.co iPhoneアプリのUIアニメーションをカテゴリ別に紹介しています。マウスオンでアニメーションが確認でき、アプリのデザインやUIアニメーションなど、アプリ開発に大変役立ち
きっと世界に旅立ちたくなる！おしゃれな旅系Webサイト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、向井理です。うそです。 LIGブログデビューのしんたくです。旅が大好きで1ヶ月前までインドをフラフラしていました。旅をしてる時のあの感覚、帰国すると急に恋しくなるから不思議ですね。 最近僕の周りでは「旅に出たい！けど時間もお金もない！」という声をよく聞きます。もうすぐゴールデンウィークとはいえ、仕事が忙しい方は海外でのんびり……はなかなか難しいのではないでしょうか？ そこで今回は、日本に居ながらにして“世界を旅している”ような気分にさせてくれる、素敵なWebサイトをまとめてみました。 世界に旅立ちたくなる旅系Webサイト5選 1. Google「Night Walk」 https://nightwalk.withgoogle.com/en/home ご存知の方も多いかもしれません、フランス最大の港湾都市、マルセイユの夜をPC上で自由に散歩することができる「Google Nigh
Webデザインをパーツで参考にできるサイトまとめ
こんにちは、工藤です。 Webデザインの際、パーツで悩んでしまうことがよくあります・・。 今回はパーツ毎にまとめてくださっているサイトをご紹介します。日本語サイトが多めです。 パーツ全般を集めているサイト ブブンデザインアーカイブ http://bubundesignarchive.jp/ Croppy http://croppy.org/ MephoBox http://box.mepholio.com/ メインビジュアル関連 WEBデザインのメインビジュアルまとめ http://mainvisual.net-king.com/ MAIN VISUAL collection http://mvisual-collection.dslrs-journal.info/ 見出し関連 見出しデザイン.com http://midashi-design.com/ Typography For He
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
意外と簡単！アイコン風Webフォント使ってみたらブログデザインがグッと洗練されたよ！設定方法を紹介 - ラブグアバ
Webフォント導入のきっかけWebフォントを導入しようと思ったのは以下の記事を拝見したのがきっかけでした。 WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた これを見て「わー、細かいけどこういうの素敵！これは私もパクりたい！オマージュしたい！」と思いたち、やってみることにしました。 で、いきなり結果から書くと、こんな風になります。 黄色の○で囲まれたハートやフォルダのアイコン。これが今回導入したWebフォントなのです。 これがフォント？って思いますよね。そうなんです、こういう一見画像（アイコン）風のデザインをフォントだけできちゃうのがWebフォントの優れたところなんです！ あくまでフォントなので拡大・縮小しても画像が荒くなったりしませんし、CSSでの装飾だって可能です。画像じゃないので表示も軽いです。 どうですか？ちょっと興味わいてきましたか？気になってきたら続
デザインを良くしたい全ての人に知って欲しい3つの誤解| UID Lab
2013.11.03 デザインを良くしたい全ての人に知って欲しい3つの誤解 この記事は以下に移転しました。 http://lambda-structure-design.jp/lab/three-misunderstanding-of-design/
Sublime Text初心者向け：覚えておけばとりあえずラクできるおすすめショートカットキーまとめ
こんにちは、霙(@xxmiz0rexx)です。 立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。 便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず！！という、 私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です 覚えておきたいショートカットキー とりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。 私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますｗ みぞれが選ぶ最も便利なショートカットキー3個 入力コマンド 結果
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！ もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB制作者なら見ておいてほしい！今更聞けないCSS用語のボキャブラリーがひと目で分かる『CSS VOCABULARY』 | バンクーバーのうぇぶ屋
必ず覚えておきたいHTML5の特徴と新機能／HTML5完全読本#1-1 | HTML5完全読本―実践テクニックとWebデザインの最新動向
Loading...
