-
ID:qvjkwn さんの質問

ご解答、よろしくお願いします。

これまでデザイン作業は担当していなかったのですが、
今後、少しづつデザインも担当することになりました。

PCサイトはひとまず作成できたのですが、
スマートフォン用のデザインをどう進めたらいいのか悩んでおります。

今後も作成する機会は増えてくると思うので、
すぐに作成できるようにテンプレートがあると便利かなと思うのですが、
皆さんはどうのように作成しているのでしょうか。

もし、テンプレートを自作するとしたら、
どのような点に注意するとよいでしょうか。
(カンパスサイズやファーストビューのサイズなどはどれくらい?)

またフリーで使用できるテンプレートや、
便利なツールなどがあれば教えて頂けますでしょうか。

質問が多くなりましたが、
まとめると、普段Webデザインをしている方たちは、
どのように効率良く作業しているのか、
教えて頂けますと幸いです。

何卒、よろしくお願いいたします。

みんなの回答 13 件

ID:nLwllT さんの回答

PC作った後にさあSPどうしようじゃ全然ダメ

ID:DaEiro さんの回答

レスポンシブデザイン
フルードグリッド
あたりを検索するといいです。

ID:l4bYg5

↑アカンアカン!そんな専門用語はやすぎるで〜

ID:l4bYg5 さんの回答

うーん、むずかしいなあー、どっから説明しよーか。とりあえずそれらしい参考書を1冊買ってみよう!ゆけ!ジュンク堂へ!小一時間ほど、にらめっこしてこい!探すのも勉強だよ!

ID:2bEB06 さんの回答

このへん参考にしてみては。まだ参考になる記事だとおもいます。

スマートフォンサイトをデザインする上で知っておくべき10のTIPS - to-R

http://blog.webcreativepark.net/2011/06/16-103025.html
ID:yLm0I6 さんの回答

既に後悔されているテンプレートはいっぱいあるので、それらを参考にすればいいじゃないでしょうか。
テンプレートの作り方自体も参考になるかと思います。
今参考にするならGoogleのWeb Starter Kitがいいんじゃないかな。

ID:sX6w40 さんの回答

先輩さんたちは、初心者さんがくると嬉しそうですねー。

ID:II6ptD さんの回答

Web制作ってつくづくレベルの差が激しいなってW3Qに来る度に思います。

ID:KAJFeR

だから、トピ主と君のようなレベルでもやっていけるんだろwww

ID:3GYEM2 さんの回答

bootstrapの仕組みを解析するのがよいかと。
あと、「モバイルファースト」で先に検索したほうがいい。

ID:S1viYG

本題からそれるかもしれないけど、フレームワークって小規模な案件だと効果あるんでしょうか?勉強コストとサイトの読み込み速度考えると、あわない気がしてます。トビ主さんはどのくらいの規模のサイトを担当されてるのでしょうか

ID:3GYEM2

規模の大小は関係なくて、フレームワークは、一度学習すれば、その技術でサイトを量産できるということにメリットがあると思う。

ID:S1viYG

たしかに仕事の数をこなす面では時間短縮になりメリットがありますね。その分、最初の学習コストがかなり高い気もします。
個人的な意見なのですが、自分用のフレームワーク的なのを作るのが一番なのかなって思います。使いこなせる範囲が一番ラクなきがするので。

ID:3GYEM2

>自分用のフレームワーク的なのを作るのが一番

その通りだと思うよ。
ただ、人様のフレームワークを理解できる程度の技術がなければ、自作なんて夢のまた夢。たとえば、CSSじゃなくてPHPフレームワークを例にとると、PHPをあまり理解していない人間がオレオレフレームワーク作るより、既存のフレームワーク使ったほうがよっぽど安全に高速に動く。

ID:HoPJ.O

オレもコメ主に同意だな。
そして気をつけなきゃいけないのは、クライアントがデザインを静止画で見せろと言ってきた場合。デザイン見せて、あれこれ修正指示入るとフレームワーク使ってる分面倒になる場合もある。
構造を理解してカスタマイズもしっかり対応できるなら積極的に使ってもいいかと思う。

ID:S1viYG さんの回答

テンプレートよりデバイスの情報や制約・暗黙のルール的なのを先に調べてください。

例えば

  • コーディングのviewportの違いを理解
  • 2倍サイズ等でデザインする理由
  • スマホで使えるフォントは?
  • デバイスのシェア
  • デバイスの画面サイズとファーストビュー
    などなど

ID:SiIFxj

デザイナーさんなら、Webフォントなど調べるといいかもしれません。
CSS解像度や、retinaディスプレイについて調べるのも良いかもしれません。

ID:sX6w40 さんの回答

聞くより、ググったほうがはやいよ

ID:GyOFk2 さんの回答

「スマホ、Webデザイン」あたりで検索かけて、実際のスマホサイトのデザインを眺めてれば、なんとなくスタートは切れるんじゃないかと。
次にスマホは画面のピクセル数がまちまちなので、その差を埋めるためにレスポンシブデザインとか調べてみると、理解しやすいかもです。

ID:EkppAl さんの回答

PCをデザインした時に、何をどのように伝えるか、どのように操作したら使いやすいか等を考えて作ると思います。
スマートフォンになるとそれらのモニターは縦長になり、ユーザーの操作はマウスから指に変わり、ディスプレイはretinaに変わり、画面との距離も変わってきますね。
PCデザインからスマートフォンのデザインの起こす時、これらの変化した環境に合わせてレイアウトやサイズ、ユーザービリティに関係してくる部分のパーツを変更していきましょう。
もちろんこの時に、伝えるべきことや、ユーザビリティは落とす訳にはいきません。
もしネットで作り方を調べるのだったら、PCからスマフォにした時のセオリー的な事を調べればいいと思います。
あとは各々のサイトごとに変わってきますので。

って思ってます。。。

ID:HoPJ.O さんの回答

ほんと、基本レベルからの質問だったら、ここで聞くより本を一冊買って読んだほうがいいよ。
あとフレームワークを使うのもいいけれど、まずは一度自分で作ってみると理解も早い。はじめっからフレームワークに頼っちゃうと、構造を理解していない分カスタマイズが困難になるし、CSSファイル見ただけで白旗あげたくなっちゃうので。

最終更新日:2014-07-30 (3,176 views)

関連するトピックス

ページ上部に戻る