Web Design Trends【WordPress】マネージドホスティングとは？共用ホスティングとの比較 個人でWordPressのサイトを公開する場合、レンタルサーバーを利用する場合がほとんどだと思います。 レンタルサーバーは安…
要素をずらして重ねるレイアウトについて｜金 成奎
要素をずらすレイアウトの流行最近公開された、デザイン的に秀逸なウェブサイトを見ると、矩形 (長方形) やテキストといった要素を (あえて) ずらして重ねる手法を多く見つけることができます。 具体例をあげます。 napla recruit site Abel 大阪医科大学 住信SBIネット銀行新卒採用サイト まとめると、共通してこのような表現と言えるでしょう。 - 写真の両端もしくは片方の枠を、カラム幅いっぱいに吸着して配置しない (余白を持たせる)。 - 要素同士を後景が (あえて) 見えるようにずらして重ねる。 - 文字 (タイトル) を画像枠内からはみ出させる。 背景シンプルさからの脱却 こういった表現の背景にあるのは、一つにはフラットでシンプルなデザイントーンからの脱却、と言えます。 ここ何年かで、グリッドで仕切りブラウザを大きく使うシンプルかつリッチなビジュアル表現が隆盛となり
デザイン会社に入ったら、まず注意されそうな事10個まとめてみた
お久しぶりです。 繁忙期の波にのまれ、約4ヶ月ぶりのブログ更新です。 本当はただのサボりですが 見事な3日坊主っぷりに自分でも驚いております。 さて今回は デザイン初心者が押さえておきたい基本を 自分への復習の意味も込めてまとめてみました。 どれも管理人は死ぬほど注意されました。 たまに、抜けてしまう事もあるので 脳裏に焼き付けたい気持ちで書きました。 【デザインの基本1】フォントの種類にこだわる これは、どこの会社でもほぼ注意されますよね。 デザインをやり始めの頃に陥りがちなのが 「パーツ」のデザインに目がいきすぎて フォントの種類は二の次になってしまう事。 フォント選びで、デザインは大きく変わるので 普段からフォントのレパートリーを知識として持っておきたい。 ちなみに管理人は、１社目の会社で小塚フォントだけでデザインしてて クライアントから叱られました。。。 【デザインの基本2】アイコ
ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
デザインにおいて全くの素人だった大学生が、ひたむきな自主学習で一躍、時の人に。春田雅貴さん（23）は、他社サービスのデザインを完コピ。自ら分析・発信し、話題となった。なぜ彼は泥臭い努力を？ そこにあったのは「社会とつながりたい」という強い意志だった。 なぜ、デザインの素人だった大学生が注目された？ デザイン界で、ちょっと名の知れた大学生インターンがいる。 それが春田雅貴さん（23）さんだ。彼は横浜国立大学・経営学部の大学4年生（2018年1月現在）。クラウド会計ソフトのfreee社でインターンのデザイナーとして働く。じつはつい１年前までデザインに関してまったく素人だった。 彼を有名にしたのが「UIトレース」という取り組み。 他社のWebサイト、ランディングページ（LP）、プロダクトにおけるUIをゼロから模倣（模写といってもいい？）。そのポイントをtwitterや、ブログで発信していったのだ
Webデザインのための情報整理術: 情報過少編
こんにちは、webデザイナーのニシです。情報整理の記事を書いているのに机の上が汚かったので、今急いで片付けました。 前回は「Webデザインのための情報整理術：情報過多編」を書きました。 今回は「情報過少編」です。 クライアントからもらった情報があまりに少ない時、途方に暮れた経験ありませんか？私はあります。 そういう時どう切り抜けたか、を自分のメモがてらご紹介します。 目次 なければ作る 分解して再構築 文章を足す デザインでなんとかする まとめ なければ作る 分解して再構築 例えば以下のような文章（117文字）があったとします。 このサービスはコンシューマ向けクラウドストレージサービスです。費用は無料プラン・有料プランがあります。無料プランは10GB、有料プランは100GBまで利用可能。自動アカウント発行でいますぐ使えます。強固なセキュリティで情報を守ります。 我々webデザイナーは、この
非デザイナーがナメられないための、おすすめデザインツール12選
僕は非デザイナーですが、こちらの考えにとっても共感します。 ブログにしても、アプリにしても、イベントにしても、良いコンテンツは世の中にもういっぱい溢れていて。 本気度を示し、他ではなく私たちのコンテンツを選んでもらうために、デザインにこだわるって大事だなって考えています。 おしゃれなものを作らなければいけない、と言うわけではないと思います。 使ってもらいたい・届けたい人たちに寄り添い、作りたい世界観を伝えるためのデザインにすること。 相手視点を持った思考が大事なんじゃないかなって思います。 『わかる！だけど実際難しいんだよ！』 という非デザイナーの方々に向けて、同じく非デザイナーの僕がお気に入り登録して愛用しているツールをシェアします。 有名どころも多いですが、もしご存知ないものもあったら触ってみてください。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
デザイナーが伸び悩まないためのスキル18分類【標準スキル編】 | CyberAgent Developers Blog
誤解がないよう一旦 ここまでの内容を振り返ってみると、如何にも “ 基礎スキル ” から “ 標準スキル ” へ、ステップアップするという見え方になりがちですが、必ずしもそうはなり得ないということを書き加えたいと思います。それは、個人としてのレベルが高く、人の2倍、3倍と仕事をこなす職人的なデザイナーが存在するからです。 ある程度の年次を経たデザイナーを “ 標準スキル ” のシートでフィードバックしようとした時、「なんか書きにくいなー…」と感じることがあります。こんなデザイナーは、受けた仕事をたんたんとこなし、パフォーマンスを出す職人タイプなのかもしれません。 例 ・イラストが描けるため仕事の専門性が高い。 ・デザイン、コーディングができ実装まで1人で完結してしまう。 ・そもそも仕事がめちゃくちゃ速い。 こんなタイプのデザイナーには、あえて “ 基礎スキル ” のシートでフィードバックし
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
デザイナーやコーダーがいなくても、BootstrapベースのかっこいいWebページが驚くほど簡単に作成できてしまう -Assembly | コリス
デザインやHTML, CSSの知識は不要。Bootstrap 3ベースのかっこいい縦長ページや複数ページのサイトが簡単に作成でき、デザイナーやコーダーがいなくても、そしてデザインやコードが分かる人には今までの作業がぐっと楽になるオンラインサービスを紹介します。 サンプルを元にカスタマイズしてもよし、ヘッダやコンテンツなど100種類以上のコンポーネントからクリック一つでぽんぽんページのレイアウトが完成してしまいます。 Assembly Assemblyは無料で利用でき、一部のコンポーネントとHTML化が有料（$17）です。 $17は2016年2月現在、1,900円なので、フル機能でこの値段は有りですね。 まずは、Assemblyでどんなページができるか見てみましょう。 縦長スクロールのページで、ヘッダは大きい写真画像、コンテンツが数パターンあり、フッタがデザインされています。コマ数を落として
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
![暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/94132f880a35b27ba30182d0db13b3897a709cf1/height=288;version=1;width=512/https%3A%2F%2Fp.cdnanapi.com%2Fr%2F2016%2F02%2F22%2F16%2F2dda36d2-0a0e-4e7b-93c4-adff36f1ee65.JPG)
バナーデザインの参考になるサイト9選
限られたスペースの中でターゲットに訴求しなければならない「バナー」のデザイン。「つい似たようなデザインばかり作ってしまう」「いまいち広告としての訴求力がない仕上がりになる…」など、バナー制作に悩むWebデザイナーの方もいるはず。今回は、そんなときにデザインの参考にしたいバナーまとめサイトをご紹介します。 ＜この記事に関連する記事＞ クリックしたくなるバナーを作るためのコツまとめ Webデザイナーに求められるスキルレベルは？未経験でも最低限必要なのは？ Webデザイナーは副業にできる？案件獲得の方法も解説 バナーデザインの参考になるサイト9選 Retrobanner http://retrobanner.net/ 7000種類以上（2017年3月現在）の広告バナーを集めて一覧表示しているサイト。サイズ、色、業種、テイスト（シンプル、かわいい、など）でカテゴリ分けできるので、制作するバナーのデ
ブックマークしておきたい！UIデザインのアイデアに困った時、参考になるサイトのまとめ | コリス
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。 ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。 UI Patterns ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。 ローンチして間もないサイトですが、内容は非常に充実しています。 Collect UI DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。 このサイトもローンチしたばかり、登録数は2,000
グラフィックデザイナーに学ぶ、表現の幅を広げるためのヒント | FICCナレッジブログ | FICC
デザイナーとして日々の制作に向き合っていると、自分のデザインにマンネリを感じることはありませんか。クライアントや商品が変わっても同じあしらいをよく使っていたり、アクセントの付け方が似ていたり。もちろん自分の中で定番のデザインがあることは、効率的でもあり、デザインの個性とも言えます。しかし、そのマンネリを抱えたままで良いのでしょうか。 そこで今回は、Webの領域から少し視野を広げて、ビジュアルコミュニケーションの源泉とも言えるグラフィックデザインから、表現の幅を広げるためのヒントを探ります。 現在フリーランスで活躍されているアートディレクター／グラフィックデザイナーの横山 徳（よこやま のり）氏をFICCにお呼びし、勉強会を開催しました。普段どのような考え方でデザインを制作し、またどのようにその表現力を身につけているのか。Web制作にも活かせそうなヒントを伺いました。 お互いの実績を紹介し合
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
