最新のWEBデザインはマテリアルデザインなのか?フラットデザインとの違いやボタン作成方法について

このQ&Aのポイント
  • 最新のWEBデザインはマテリアルデザインが主流ですが、フラットデザインも一部で使用されています。
  • マテリアルデザインはフラットデザインと比べて立体的なデザインであり、シャドウの使用も特徴です。
  • ボタンの作成に関しては、フラットデザインに立体感を与えるためにCSS3を使用したボタンがオススメです。
回答を見る
  • ベストアンサー

最新のWEBデザインはマテリアルデザインなので

新しいポートフォリオを作ろうとしているのですが、 最新のWEBデザインはマテリアルデザインなのでしょうか? それともまだ先の話で現状はフラットデザインが良いのでしょうか? また、フラットデザインは押せる感が出せないのでスキューモフィックと混ぜるべきだという、意見も有るのですが、今ポートフォリオを作るならどんな感じが良いと思いますか? 下記のようなフラットデザインだけど立体的に見えるボタンをCSS3で作るのが良いでしょうか? http://delaymania.com/201410/web/css-button-flat-design/ 商用可のジェネレーターで良いのですよね。 手打ちで微調整までは出来なくても。 また、マテリアルデザインを調べてみたのですが、フラットデザインとどう違うのでしょうか? またシャドウなどを使い始めると言うことが違うのでしょうか? また画像は重いので出来るだけ使わないのが主流のようですが、ボタンなどの色もすべてCSS3で作った方が良いででしょうか?

noname#226032
noname#226032
  • CSS
  • 回答数1
  • ありがとう数10

質問者が選んだベストアンサー

  • ベストアンサー
noname#212058
noname#212058
回答No.1

別にマテリアルデザインでもフラットデザインでも好きなほうを 選べば良いかと思います。時期によってデザインの『流行』は ありますが、どちらでなくてはダメと言うようなルールはありま せん。 また、「CSSを使うか」「画像を使うか」も好きに選択すれば良い かと思います。画像の重さなど、動画などに比べれば屁でもありま せん。それよりは『自分の満足できるデザインが作れるか』のほう がよほど重要です。 技術的な問題はいったん全て忘れて、自分の好みで考えたほうが良い です。マテリアルとフラット、あなたの好みはどちらでしょうか? # 『流行』に敏感になりたいのなら、色々ファッショナブルなデザ # インを見て感性を磨くしかありません。ここらへんは服飾と全く # 同じです。

noname#226032
質問者

お礼

ありがとうございます。 流行より、理由の方が大事なのですね。 スキューモフックでも問題が無いということになりますね。

関連するQ&A

  • Webサイトのデザインは手打ち派?テンプレート派?

    Webサイトのデザインって皆さんどうしているのでしょうか? ・全て手打ちで作っていますか? ・CSSテンプレートなどを他のサイトからダウンロードして、一部をカスタマイズして作っていますか? どちらのパターンでしょうか? 私の場合、HTMLもCSSも全て手打ち。 絵心もないのにロゴマーク画像もGIMPなどで自作してしまったので、大失敗してしまいました。 個人Webサイトの運営者様で、自分はこうしているというご意見を訊かせてください。 参考にしたいのです。

    • ベストアンサー
    • CSS
  • クールなwebデザイン

    クール・かっこいいなど、デザインの優れているサイトがたくさんリンクされているサイトはないでしょうか? リンク集でもいいし、個人のブログ(デザインのカッコイイサイトを集めたもの)、大手の有料web制作会社の制作実績のページなど、 FLASH、cssなどなど、何でもいいのでかっこいいグラフィックや、またボタンなどのパーツのデザインがキレイなものなど、 オススメのサイトや、そういうものを集めたリンク集があったら教えていただきたいです!

  • webデザインのしかたについて

    webサイトのデザインについて質問です。 http://www.nnmal.com/2012/10/40-japanese-creator-portfolio-sites/  以上のサイトで紹介されているような綺麗なWebサイトを作りたいと考えています。 こういったwebサイトにあるボタンや背景。 その他諸々の飾りは、全てPhotoshopやIllustratorで作られていると考えて良いのでしょうか? (一部Full Flashですが…) それと、基本的には、Dreamweaverを使って、このようなWebページ自体が作られていると考えていいですか?

    • ベストアンサー
    • CSS
  • Webデザインの就活用ポートフォリオについて

    これからデザイン職で転職活動をしようとしている者です。 前職でアプリのUIデザインやアイコンデザイン、Webの広告バナーなどを 作成してきたので、紙面のポートフォリオにまとめようと考えているのですが。 A4用紙に出力する場合、どれも解像度が足りないことに気付きました。 サイズを考慮してもギリギリ200dpiが限界…。 これでは印刷所に入稿も難しいですよね? その場合自分のポートフォリオ用のWebサイトを作らなければならないのでしょうか? 私はhtmlやCSSが出来ないので、サイトを作ったことがなく…。 作成してきたアプリはスマホに入っていますが、過激な広告(性的な広告)が 多く含まれているため、面接時に直接見せることはできないと思い、 広告を省いた上で1枚絵の画像にして観せたいと考えています。 たとえばBCCKS( https://bccks.jp/ )など、ポートフォリオにも 使えそうなサイトがあるのは知っていますが、 前職で作ったものを堂々と掲載することは難しいなと…。躊躇しています。 さいあく面接時にノートパソコンを持参して、 今までの作成物をファイル毎に観せる形になるのでしょうか? どうか教えていただけたら幸いです。

  • Webデザインにおいて「押しやすいボタン・バナー」とは

    Webデザインにおいて「押しやすいタン・バナー」とはどのようにお考えですか? ここではカーソルをもっていったらロールオーバーするのでボタンだとわかった、ではなく、見てすぐに「タン・バナーだ、これは押せるものだ」と認識できるもの、です。 ●周りと違う色をしている ●立体的である と言うのがあると思いますが、あとはどうでしょうか? 三角を頭につけるとボタンっぽいですけど、リストのマークとしても使えます。 この前作っていて、立体的であるにもかかわらず、押しにくいものに仕上がってしまいました。 ボタンの文言をかえれば分かりやすいのでしょうか… 例えばバナーですが http://www.ikesai.com/ のように、左下に広告のバナーがありますけど、押せるかどうかはカーソルもっていかないとわかりませんよね。 ただの絵にみえるんですが… こういうのをもっと押させたい場合にはどのような工夫があるとよりよいでしょうか?」

  • Webデザインで使うグラフィックソフトてどれを使えばいいですか?

    Webデザイン初心者です。 Webのアイコンやボタンなどの画像を作ろうと思ってるのですが、 どのグラフィックソフトが最適なのでしょうか? 今、photoshop、illustrator、ImageReadyが手元にあります。 一応、自分的にぐぐって調べてみたのですがFireWorksが良いとか 書いてましたが一番いいのはそれなのでしょうか?? 自分的にはCSS SPRITE用の画像や、ロールオーバー用の画像を 作りたいのですが。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • Webデザイナー 転職する際のポートフォリオについ

    Webデザイナーに未経験で転職する際のポートフォリオ、作品の完成度について 似たような質問の投稿で申し訳ありません。 未経験からWeb制作会社のWebデザイナーへの転職を考えているものです。22歳男です。 ポートフォリオの完成度についてのご質問なのですが、具体的に転職で有利になるポートフォリオのクオリティ度合いがいまいち分かりません。 Webデザイナーのポートフォリオの作り方やプロフィールやなぜこのデザインにしたのか等のデザインコンセプトの作成のアドバイス等は多く見受けられるのですが、 具体的にHTMLはここまで覚えて、Photoshopはここまで使えて、Webサイトのクオリティはこんな感じまで仕上げればいいと言った明確な内容を提示しているものが見つかりません。 なので、正直どこまでHTML、CSSやPhotoshop等のソフトを扱うようになれば良いのかが明確にイメージができず、混乱しています。 ポートフォリオの作り方に正解はなく、正解を探すこと自体が不毛なのでしょうか? 今まで学習した内容としては ・HTML、CSS Progateの中級まで終えた ・Photoshop、Illustrator 世界一わかりやすいIllustrator &Photoshop 操作とデザインの教科書の書籍を全範囲終了済み もう作品作りに入ってしまっても良いのでしょうか?

  • 初心者以下だけどwebデザインを学びたい

    10年ほど前になると思いますが、趣味でFireworksMXのスライス機能と DreamweaverMXで今思えば最悪なテーブルレイアウトでweb作成をしていました。 divタグすら使ったことない、CSSは行間開けたりするのにちょっと使ったことがあるレベルです。 その時の感覚が抜けない、ゼロの初心者以下の人間なのですが、 Photoshopからのwebデザインやブログ機能の組み込み、 WordPressのテーマカスタマイズ等を学びたいと思っています。 まずは基礎とばかりに『web標準の教科書(http://www.amazon.co.jp/dp/4798010928)』 片手に手打ちでポチポチやり始めたところですが、このあと何から覚えていけば効率が良いか、 この書籍ならステップアップに最適といったものがあればアドバイスいただけないでしょうか? 漠然とした質問で恐縮ですがよろしくお願いします。 すっかり浦島状態です…

    • 締切済み
    • CSS
  • プロっぽいWEBデザイン

    私はHTML・CSSを勉強しています。 しかし素人っぽい地味なサイトになってしまいます。 (10年前の素人がHTMLを学んで作ったような) このようなサイト→http://dougaset.com/sample/xhtml/samplesite/webpage/about.html そうではなくて、 商業色を全面に押し出した、ITベンチャー企業が作りそうな、 キャッチーで大衆受けする小綺麗なサイト作りたいです。 このようなサイト→http://pr.cgiboy.com/  ※左記はWEBデザインについての例です。動的プログラムには言及していません。 例えば上記サイトで言うなら、 虫眼鏡、星マーク、ハートの画像、光沢のあるボタン、ロゴ、可愛いキャラクター等です。 いくらHTML・CSSを学んだところで、これらは作れませんよね。 既にadobe系のソフトは買ってしまいました。 それらを勉強するための書籍を教えてください(amazonのURLでお願い致します) 素材が必要ならば、 WEBデザインの下請け会社が提携している素材・モデル屋を教えてください。 ※外注という方向は無しでお願い致します。

    • ベストアンサー
    • HTML
  • Dreamweaver8のデザインビュー

    全くのウェブ初心者なのですが、最近、ホームページ作りを始めました。CSSと、フロートやリキッドといった設定を使い、3段組みのページを作りました。 はじめ手打ちで作成していて、途中からDreamweaver8で作成しようとしたのですが、ブラウザ(IE6.0)ではうまく表示されるものの、Dreamweaver8では、かなり表示が乱れます。 Dreamweaver8のデザインビュー表示とはそんなものなのでしょうか。それとも、Dreamweaverの設定やわたしのホームページの書き方などに問題があるのでしょうか。うまくDreamweaverのデザインビューを使いこなすコツのようなものはありますでしょうか。

専門家に質問してみよう