KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

フラットデザインとレスポンシブデザイン

LINEで送る
Pocket

iPhone6が発表されてしばらく経ちましたがあの大きさとデザインには少し抵抗があって
未だに機種変更できていません・・・

5Sを使っているのですが、このデザインと大きさがちょうどいいですね。

001

噂では6までがジョブズの最後の作品と言われていますが、
5までという話もあり実際のところはどうなんでしょうか・・・
さて今回はWebデザインの話になりますが、
最近のWebサイトは「フラットデザイン」や「レスポンシブデザイン」が
主流になっています。
以下、「フラットデザイン」と「レスポンシブデザイン」の簡単な説明です。

■ フラットデザイン
シンプルで平面的なデザイン。

■ レスポンシブデザイン
PCやスマートフォンなど複数の機器や画面サイズに対応させる際に
同じ内容が表示されるようにするデザイン。
Railsで開発する場合は「Bootstrap」を使うことで
簡単に実装できるようになっていますが、
慣れていないとなかなか思った通りにデザインできないですね。(^_^;)

特にCSSを書いていると、どこを直していいのかとか、
直しても思った通りのデザインになっていなかったり、
それにあとから追加して書いているとコードが汚くなったりしてメンテが大変です・・・
今、主流になってきている「Sass」を使うと構文的に書けて変数も使えて
だいぶコードが見やすくなります。

■ 「Sass」のメリット
・読みやすい
・変数や繰り返し処理が使える
・//で1行のコメントが書ける
・関数が作れる

あと、HTMLを書くうえでも「Haml」を使うことで
開発効率をアップさせることができるようになります。

■ 「Haml」のメリット
・タグを書かなくても良い
・Rubyを書くことができる

フロントエンドの開発がメインではないので「Sass」や「Haml」を使う機会はあまりないのですが、今まで書いていたCSSやHTMLよりもだいぶ楽になりました。

今回はWebデザインについての包括的な内容でしたが
「Sass」や「Haml」について、今後詳しく紹介できればと思います。

 

【関連記事】
3分で構築するRuby on Rails開発環境
続・3分で構築するRuby on Rails開発環境~MySQL設定編~
フラットデザインとレスポンシブデザイン
「Cloudera World Tokyo 2014」に行ってきました
Code Avengers(コードアベンジャーズ)
paizaでスキルチェック ~オンラインハッカソンに挑戦~
そしてスーパープログラマーへ

LINEで送る
Pocket