illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
アルドノア・ゼロのウェブページがヤバい - 職質アンチパターン
http://www.aldnoahzero.com/ とにかく見て実際に試して欲しい．一発でこのUIを使いこなせたなら貴方は凄い，この記事読まなくても良いと思います． さてUIに係る問題点で感じたことは以下．まあもっとあるとは思う． JSについてはJS諸賢にお任せします． 問題点 そもそもメインコンテンツへの入り口が「LOGIN」なのヤバい． こんなかんじ．ハイコンテキスト！！！ LOGINでメインコンテンツに入れると思うのおかしい感じがする．会員制ページと勘違いしてしまう． 「LOGIN」しか提示されてないと，その時点でログインしたくないおじさんとかログイン面倒くさいおじさんとかが去ってしまう可能性が高まる 放送後，トップページがこういう感じになるんだけど，まさか「LOGIN」がメインコンテンツへの入り口だとは思うまい．多くの人がどうやって普段のページに飛ぶのか迷うと思う． pic.t
16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？ 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性
いま同人特設サイトが熱いっていう話 - MILKWALKEEのブログ
2014-06-22 いま同人特設サイトが熱いっていう話 ここ最近何か同人イベントがある度に、個々の作者がかなり凝ったデザインのWEBページを作成してるっぽい現象がある、告知ページというかティザーとかいうかそういうの。WEBデザインとか全然詳しくないからWordPressがどうのとかCSSがどうとかそういうの全然分からないけど、自分が作ったものに対して誤解なく正確に内容が伝わることは非常に大事。これはこういう理由で作って、こういう形で、中身こうなってます。売り手が買い手にわかりやすくプレゼンするっていうの大事。リフレーミングとかビジュアライゼーションとかそういうの有るっぽいけど、デザイン、特にウェブでの情報は受け手に分かりやすく伝えましょう、っていうの最近の流れだと思う。 同人特設サイト簡単に作れるっぽい Tumblrで同人音楽CD特設サイトが簡単に作れるレスポンシブなテンプレート「Tok
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
脱ダサピンク宣言ーその１ | Short Note
ShortNote は、体験談や思い出などを、 エッセイのような文章にして投稿したり、 みんなのエッセイを読める、サイトです。
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
Webディレクター向けChromeアドオン10選（基本編）
目に青葉山ほととぎす初鰹。みなさまいかがお過ごしでしょうか。ディレクターをしているluckyと申します。ゴールデンウィークが終わり、早くも夏休みに思いを馳せている方々も多いかと思います。私もそのひとりですが… ここはひとつ気合を入れるべく、ビシッ！と業務改善に繋がるようなGoogle Chromeのアドオンをご紹介させていただきます。今回はディレクター業務を行う上で便利だと感じた、ごく基本的なものを10個チョイスしてみました。 目次 そもそもアドオンってなに？ Awesome Screenshot QRcode maker ColorZilla 文字数カウンタ Cache Killer Page Ruler ウェブタイムマシン Ghostery AdMatrix Analytics Evernote Web Clipper 結論 そもそもアドオンってなに？ ・ブラウザに新機能を追加できる簡
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
日本のウェブデザインはなぜこんなにも世界と違うのか？ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
本記事は、ブログ『RANDOMWIRE』の運営者の許可を得て、翻訳しています（元記事）。 静寂が満ちる禅庭園、美しい神社、静穏な寺、洗練された茶道。日本の伝統建築、現代建築、書籍、雑誌は世界中のデザイナーの羨望の的だ。 だが、どうしてか、こうした巧みな技術はデジタルプロダクトには生かされていないようだ。特にそれが顕著なのは、ウェブサイトだ。その多くが、1998年のスタイルから変化していないように見える。 例１：楽天市場 有名な日本のサイトの多くを見てみると、次のような傾向が見られる。（例えば、 Yahoo Japan、楽天、ニコニコ、JR東日本、読売新聞…） 隙間なく敷き詰められている文字 小さく、画質の悪い画像 数えきれないほどのカラム 色同士の調和に欠ける派手な色使い、きらきら光るバナー Flashのような、過剰に使用される時代遅れのテクノロジー 美しい俳句、質素なわび・さびとはかけ離
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
2013年、この一年で大きく変わったウェブサイトのナビゲーションの5つのトレンド
ウェブサイトに使用されるナビゲーションはこの一年の間に、大きく変わりました。スクリプトやスタイルシートを使い派手なアニメーションやインタラクションを取り入れることもできますが、最近のトレンドはよりシンプルで、すっきりしたデザインが好まれています。 最近のナビゲーションのトレンドを紹介します。 Up and Coming Navigation Trends 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。最近海外のブロガーから他ブログでの無断翻訳・転載の声を聞きます。 ナビゲーションの欠如 スクロールベースのナビゲーション ミニマルなナビゲーション サイドのナビゲーション サークル状のナビゲーション 終わりに ナビゲーションの欠如 最初にあげるナビゲーションのトレンドは、ナビゲーションの欠如です。これは二つの条件が揃えば機能します、一つは
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
[JS]斜めのグリッドを使った美しいレイアウトを簡単に実装できるスクリプト -diamond.js
オプションを変更したキャプチャ diamonds.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="diamonds.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> Step 2: HTML ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。 <div class="d
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
新着記事
デザインの勉強にもなる、CSSで実装するパンくずのまとめ
スマホユーザーがモバイル“非”最適化サイトに感じている3大不満 など10+2記事 | 海外&国内SEO情報ウォッチ
