こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて聞いた方は首を傾げることでしょう。 以下に公式サイトの文言を引用させていただきます。 コンテキストに応じたコ
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
2013年から今にかけての一年間で色んな本に関わったり気になって買ったり頂いたりしたものがあったのですが、棚卸し的にそれらを紹介してみます★ ここ一年前後のうちに色々な書籍を手にする機会があったりしました。もちろん一番推したいのは先日自分が執筆に参加した現場のプロが教えるWeb制作の最新常識なわけですが、他にもたくさん良さげな本を手に入れることがあったので、どういう部分が良かったかざーっと紹介してみます！ 自分が持っている本を紹介する要は宣伝記事なんですが、読書感想文として購入する際のご参考に。私が持ってない本は紹介出来ないので、よりオススメの本があれば教えてほしいです！(他の人も書籍紹介記事書いてねアピール) 一旦ここで紹介はしちゃいますが、これらの本でまだ個別に記事を書いてないものは別記事でも触れようと思います。新卒のweb制作者一年生！みたいな人も参考にしてみてはいかがでしょうか★
あちこちブログを見てまわると、おしゃれなデザインにしているところがたくさんありますよね。 WordPress でも無料ブログでも、綺麗にデザインされているテーマ・テンプレートを使えば誰でも簡単に見栄えをよくできます。 そこまで大幅に変更するのではなく、既存のデザインのままでちょっと雰囲気を変えておしゃれなデザインにしてみたいなら、シンプルな背景画像を敷いてみるとよいかもしれません。 本記事では「WordPress のカスタマイザーを使う方法」と「CSS で設定する方法」の 2 パターンをご紹介します。 背景画像を設定してイメチェンしてみよう メインコンテンツ（記事本文）の背景色を白にして、まわりの背景色を変えておくと、メイン部分がよりわかりやすくなりますよね。読者も記事に集中しやすくなると思います。 でも、濃いめの色を使ってしまうと圧迫感を与えてしまいます。周囲の余白に気をつけないと、色が
どうも〜、こんにちはぁ！もっともっとWebデザイナーとして成長したいライター、のび太です。 さて、突然ですが「Webデザイナーにとって必要な能力ってなに？ 」という疑問をもったことありませんか？つい最近フリーランスのWebデザイナーとして飯を食っていくことになった僕ですが、最近ますますその答えが知りたくなりました。 HTML、CSSなどのコードが書ける人？Photoshopでキレイなデザインが作れる人？Webについて詳しい人？いったい「Webデザイナー」ってなんなのでしょうね〜？ 僕はこれまでWebデザイナーに関する海外記事を多く読んできましたが、「へぇ〜、Webデザイナーってこんな能力もなんだなぁ〜。」って意外に感じたことが結構ありました。 今回はその中でも特に重要だと思った5つをピックアップしてご紹介したいと思います。 Webデザイナーがスキルアップするために必要な能力5つ 1. 事前
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 で要素の幅や高さを指定する際は px や % といった単位を使いますが、最近のブラウザにおいてはこの他に vw, vh, vmin, vmax という単位を使うことが出来ます。 ついさっきまでこんな単位があるなんて知らなかったので、少し調べてみました。 Viewport パーセンテージ vw の v は Viewport のイニシャルで、それぞれこのような意味を持っています。 vw
こんにちは、工藤です。 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
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
この記事は以下に移転しました。 http://lambda-structure-design.jp/lab/three-misunderstanding-of-design/
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
本の紹介これは今読むべき！Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました！2014年4月14日290 @JUNP_Nです。WEBCRE8.jpの酒井優（@glatyou）さんが共著として参加されている「現場のプロが教えるWeb制作の最新常識」をいただきました。Web制作者ではない僕が制作の本を紹介するのはおかしいのですが、Webに関わることをしている人は読んでおくべき本だったのでご紹介。 Web制作の現状やトレンドを知っているか知らないかでは大違い目まぐるしいスピードで変化しているWeb制作の現場。最近では「フラットデザイン」「レスポンシブデザイン」「パララックス」などWeb制作の職業についていなくても耳にしたことがあるキーワードがたくさん。他にもHTML5やSass、Gitなど新しい言語やプロジェクト管理について、今のWeb制作の現場がど
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
「ウェブデザイン」について考える時、どんなイメージがありますか。 「Photoshopでデザインする！」だとか「Dreamweaverで組むよ！」とか、どこかアプリケーションや、技術の名前（ブランド）寄りのイメージになっているのではないでしょうか。 私は、ウェブデザインというものは、実際は様々な「考え方」が複合したものだと考えています。今回はその「考え方」をチャート風にしてみました。
ウェブデザインでの配置で、「ルール通りにやっているのにどこかうまくいかない」場合にどうやって解決していくかを考えてみました。今回の例題画像は、すべてクリックすると100%表示のデータを表示するようにしてあります。 ウェブデザインのちょっとした「もやもや」を、少しだけスッキリしたデザインにするヒントになれば嬉しいです。
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに？まずはどんなものか、百聞は一見にしかず
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
