自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
知らない人は損してる、イラレでスーパーのチラシを作るときの7つのワザ - Cherry Pie Weblog
昨年から、地元の印刷会社さんのお手伝いでスーパーのチラシを制作させていただいているんですが、最初に作業手順を聞いたときに、そのあまりの面倒さに閉口してしまいました。 スーパーのチラシって、何重もの文字フチとか、値段の数字が重なってて円だけ小さいとか、囲みとか、必ず文字が画像にかかってしまうから白フチもつけないといけないとか・・・ そんな手数のかかる作業を、長年チラシ制作をされている方は、イラストレーター5.5 でショートカット連打でバキバキ作ってたりするわけです。 しかし、短納期・安価を求められる今の時代、いつまでもイラストレーター5.5時代の作業を続けているのでは、相当な熟練者でないと時間にもお金にも見合う仕事ができないし、会社としては熟練者に単純作業に近いことに延々と時間を使ってほしくないのです。 でも、今のイラストレーターならできるんですよね。 そんな、知っている人は知っているけど、
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？ その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。 上部から出てきたメッセージ欄、横にはみ出てますね。 でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。 「幅」が意味するところ 実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。
これが出来れば中級者！Illustrator初心者のための「ロゴ作成講座」
先日、ブログのリニューアルに伴いまして当サイトの「ロゴ」を作成してみたわけなんです。 ↑こんなん。 で、こちらのロゴ私も大変気に入っておりまして、ありがたくも「かっこいい！」「抱いて！」というお声を頂戴したりしなかったり。 そんななか、「あのロゴはどうやって作成したのですか？」「手順を晒してください」「私も全てを晒します…//」と言ったご意見を何名かの方から頂きましたので、「Illustrator初心者のためのロゴ作成講座」と銘打ちましてどんな手順であのロゴができ上がったのかをチュートリアルにまとめてみました。 なんとも大上段に構えたタイトルですが、これからIllustratorを学ぶ方にはちょうどいい感じの内容になっておるかと存じますので大目に見てください;)そしてすんげーーーーー長いですがこちらもご勘弁ください。 新規書類を作成 では早速Illustratorを開いて、新規書類を作成し
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
参考にしたい日本人クリエイターのポートフォリオサイト 40
Warning: Use of undefined constant more_link_shrarp_remove - assumed 'more_link_shrarp_remove' (this will throw an Error in a future version of PHP) in /home/users/1/limeline/web/nnmal/wp-content/plugins/more_link_sharp_remove/more_link_sharp_remove.php on line 16 Warning: Use of undefined constant ddsg_language - assumed 'ddsg_language' (this will throw an Error in a future version of PHP) in /ho
デザインを学びたい全ての方へ - 海外のデザイン学習リソース200選
「デザインに興味があるのですが、どうやってデザインを学べばいいのでしょう？」という質問は、以前に書かせて頂いた「米国のデザイン教育から学んだこと」という記事に対して一番多かった反響の1つでした。これはデザインの分野があまりに多様なためにどこから手を付けていいのか分かりづらいというのが原因のように思います。 そこで今回は情報全体を俯瞰出来るようにするべく、下記のそれぞれのカテゴリー別に、それぞれ有益なリソースをまとめました。このリストが皆さんのデザイン学習リソースとしてお役立てば幸いです。 海外のデザイン学習リソース 23のカテゴリーOnline Learning（オンライン学習）UI/Web:（ユーザインターフェイス／ウェブ）General（一般）Product（プロダクト）Branding:（ブランディング）Book Cover Design:（ブックカバーデザイン）Design Por
WEBデザインがレベルアップする記事まとめ * prasm（プラズム）
今知りたいコト、僕が知りたいコト、教えます。@shintarowfreshです。 あー、違う違う、上からじゃないよ、マジでマジで。 今すぐ取り入れるべき素敵すぎるネタ達です。是非一読あれ！ 魅力的でワクワクする最新のエフェクトを使ったウェブサイトのまとめ | コリス 今知りたいネタがもう、満載。 あー、ほんとワクワクするわ。なんだろうな、やっぱパララックスすきっすわ。ほんと。わくわく感が半端ない。 この記事を読むだけでレベルアップできる素敵な３つのWebサイトの使用技術を分析&実践してみた | Webクリエイターボックス これは素敵。マジで素敵。 最新の技術をメチャクチャわかりやすく解説。 いいんですか？？？ 画像を文字でマスクするとか、マジスカ？？ しかも、意外と簡単なのね。 と、目を通してブクマするなりエバノに放り込むなり光の速さで永久保存しチャイナよ。 素敵な３つのWebサイトの使用
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
成功しているWebデザインの重要な要素
まれにWebサイトを設計する上で、意外と軽視されがちというか、深く考えずにずらずらとコンテンツが横並びされるパーツ。それが『メニューバー』です。今朝色々と見て回っていたら、あぁ確かにと思った記事があったので、今回はメニューバーに焦点を当ててみようかと。 メニューバーの２つの役割 Important Elements of a Successful Web Page Design （成功したWebページデザインの重要な要素） この記事をみてはっと昔を思い出した訳です。 10年前にさかのぼると、私も結構いい加減な仕事をしていた時期がありました。 というのも、私のWeb制作は全て独学であり、学校ではCADを教わったくらいで・・・。 WindowsPCを買ったのは18歳で、そこからネットにはまり、本屋をあさって学んだ訳です。そのころのネット接続といえば従量制だったので、ネットで気軽に調べるなんて事
新卒Webデザイナーにとりあえず読ませておきたいデザインの原理原則が学べるエントリー
「素人っぽいデザイン」から抜け出すために、デザイ... / デザインを勉強したことがない人でもデザインできる... / 非デザイナーのためのデザイン基本テクニック その...他...全10件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustfolio - イラストポートフォリオサイトを一瞬で作れるTumblrテーマ
cmmntr.com
designmap.info
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ