PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
“モバイルファースト”の本当の意味と、Web担当者が知っておきたい基本＆実践3ステップ | Web担当者Forum
「モバイルファースト」というキーワードをご存知だろうか。その名の通り、まずモバイルサイトを中心にコンテンツを考え、PCなど他のデバイスへと対応させていく考えだが、その本当の意味を勘違いしている人も多いようだ。 スマートフォンの登場で注目を集めているモバイルファーストでは、「ワンソースから各デバイスに対応していく考え方」がポイントになる。そのとき重要になるのが、コンテンツを一元管理できるマルチデバイス対応CMSの存在だ。 この記事では、Webサイト制作現場だけでなく、企業Web戦略の面でも重要な意味を持つ、モバイルファーストの基本について解説する。 スマートフォンの普及で見直しが迫られるPCサイトスマートフォンの普及が加速している。ケータイキャリアのプロモーションや新製品ラインナップを見れば、これは当然の流れだろう。インターネットにアクセス可能なデバイスとして見ると、PC、フィーチャーフォン
これからWebデザインの勉強を始めたい方のためのまとめ
これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ
Webデザイン最新トレンド ～イマドキUIのつくりかた 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
最近よく見てる国内のお薦めWeb制作やTips系ブログいくつか
ふと思い立ったので記事にしてみます。 最近よく見させて頂いてる国内のブログ をシェアしてみようと思って記事にして みます。僕はWeb屋さんなのでWeb屋さん 向けのブログだけになっていますが、 Web屋さん以外でも楽しめるんじゃないか と思っています。 というわけでお薦めのブログをご紹介。今までも色々なブログをご紹介していますので重複するサイトは割愛しています。 単純に自分の好みなので全然参考にならないと思いますが、お世話になってるのでご紹介したいなと。少なくともタイトルで釣っておきながら中身が無いようなしょうもないブログは1つも含まれて無いと思います。しょうもないブログとはこののブログの事なんですけどね。ドキッとした方は僕と一緒に悔い改めると幸せになれそうです。 僕自身、人様のブログ自体は殆ど見ない人間なので偏ってると思いますけど、新たな発見に繋がれば幸いです。 maka-veli.co
Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
artless Inc. / mount inc. / standardimage他...全60件
実践して結果を出す、コピーライティングの技法 | Webコンサルティング
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス
2017年6月29日 Webサイト制作, Webデザイン 最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。 ↑私が10年以上利用している会計ソフト！ ※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。 Facebookページのカスタマイズ概要 Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookペー
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
Web屋さんのための新年の抱負アイデア24
2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする
非デザイナーのためのデザイン基本テクニック その２ | 07design.blog
前回の投稿からかなり空いてしまいました。はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってしまいました。というのはウソでずっとときメモやってました。次回からはもったいぶらないで何かエントリを書く際は一気に書こうと思います…。さて続きです。・・・前回の投稿からかなり空いてしまいました。 はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってしまいました。というのはウソでずっとときメモやってました。 次回からはもったいぶらないで何かエントリを書く際は一気に書こうと思います…。 さて続きです。 前回非デザイナーのためのエントリーだからwebサイトじゃなくてチラシにしよう、と思って記事を書いたんですが 駆使するツールがもちろんweb上にあるものなので、カラーもweb用になってることを失念
年末年始にWebデザインを学び直すための3つのステップ
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PCサイトのUIデザインにおける12のトレンド
Loading...
