「Webデザイナーのためのタイポグラフィと文字組... / Webデザイナー(私)によるタイポグラフィーレイ... / Illustratorで文章を扱うとき(文字組版...他...全9件
![Webデザイナーが文字組版を勉強するときに参考になるサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/1354540120f994b5b06ee77eba30cbb9d0f7ff5d/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2011%2F11%2F12%2Fl_2011-11-12_578cfed73b2bcab99ffbfe9f0a70f59a.png)
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
2011年11月8日 Webサイト制作, Webデザイン こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。 受注 福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。 簡単なリニューアル時のご要望をまとめると下記6点でした。 お知らせ欄は更新可能 WordPressで構築 写真やテキストは流用 携帯版作成(コンテンツは一緒) ブログ・口コミ掲示板は削除 IE6は非対応でOK(ありがとうございます!!!) 制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeや
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
珍しいなー、と思ったのでご紹介。日本の Web制作会社さんのコーポレートサイトを 専門に収集しているWebデザインギャラリー 「魅せるWebデザイン」です。まだ数が多い 訳ではありませんが、なかなか見ないタイ プなので良い刺激になるかもですね。 こういうデザインギャラリーは珍しいですね。地域別になっているので同じ地域なら交流相手を見つけたりも出来るかも。良い刺激になりそうなギャラリーサイトかもですね。 シンプルで見やすいです。どうしても東京が多くなっちゃいますけどまだサイト開設して間も無さそうなので自社サイトに自信がある方はコンタクトを取ってみては如何でしょう。 僕もギャラリーサイトを運営していますが、一人で探すのはなかなか難しいのです。 例 福岡のcoralqualia(コーラルクオリア)さん 広島県のアクシスさん 福岡、大分のCONDENSEさん などなど。まだまだ数は少ないですけど、
2013年11月28日 インスピレーション デザインが思いつかない…いつもワンパターンのデザインになってしまう…。そんな経験ありませんか?デザインで行き詰まった時は、気分転換も兼ねて外にでてみましょう。画面を眺めているだけでは得られないようなインスピレーションが見つかるかもしれません。今回は新しいインスピレーションの刺激を求めてお散歩してみたので、そのコツやポイントをまとめてみます。いつも通る道やお店が少し変わって見えてきますよ! ↑私が10年以上利用している会計ソフト! インスピレーションを探すお散歩のコツ カメラ必須! これはやる気の次に必要!素敵なデザインを見つけて、数日は覚えておけると思いますが、やはり人間は忘れていく悲しい生き物。写真にとって保存しておくと後から見返せるので、必ず持っていきましょう!店内が暗かったり、黄色っぽい照明を使っているところも多いので、その辺りを調整できる
iPhone GUI Fireworks SymbolsはFireworks向けのiPhoneアプリ風UIのシンボル集。 iPhone GUI Fireworks SymbolsはFireworks用のオープンソース・ソフトウェア。iPhoneアプリはWebサイト以上にデザインが正否を左右する。どれだけ機能的に面白かろうと、デザインがいけてなかったら誰も使ってくれない。またボタンの配置やデザインで評価がはっきり分かれる傾向がある。 主なシンボル そのためデザインには十分に注意する必要がある。個人であればiPhoneモックアップアプリ等を使うが、デザイナーの人であれば使い慣れたツールでモックデザインを考えたいだろう。Fireworks派の人はiPhone GUI Fireworks Symbolsを使ってみよう。 iPhone GUI Fireworks SymbolsはFireworks
市場背景: 小さいマイクロ案件でよくあるのが「指定したURLを起動するだけのAndroidアプリが欲しい」という話が異状に多いです。だいたいなんかのついでなんですけど。うちでは5万円~くらいで売ってます。分かりやすく言えばドコモマーケットのショートカットアイコンみたいなやつですね。 用途はスマホサイトへの誘導です。EC、デジコン関係なく需要があるようです。現状、スマホサイトの集客方法が無いので。 また、Androidアプリ開発は予算が高いのでHTMLに逃げたい人に多いです。予算がだいぶ減るらしい。(某大手広告代理店談) ツール化して、公開したらスキル無い人でもこれで商売できる気がしてきたので作りました。 ←こんなのと同じやつ。 サービスの概要: 「指定したURLを起動するだけのAndroidアプリを作成するWebサービス」を作りましたので、皆さんご自由に使ってください。 当然ですが、作った
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
Fireworksで使えるテクスチャーを配布するサイトが増えてきましたね!私もよくデザインに活用させてもらってますが、水平線や斜線やグリッドなどが主でFireworksに元から入っている木目のようなの質感系テクスチャ(勝手に名づけ)のはなかなか配布されていなかったので自作してみました。 身の回りのものをスキャンしたり、photoshopのフィルターを利用して作成したものですが、よかったらご活用ください(^^) Fireworks「質感」テクスチャ15種 ご利用方法 ダウンロードしたいテクスチャ画像の上で右クリック名前をつけて画像を保存でダウンロードしてくださいFireworksテクスチャの利用方法や、質感テクスチャの活用方法については下記のサイトが参考になるかと思います。 fireworksでのテクスチャの使い方 | シンプルパターン研究所 ナチュラル系ブログデザインをFireworks
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです^^ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ~」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く