ポートフォリオを制作する際に、もちろん中身の作品の質も大事ですが、ポートフォリオ自体の見た目も非常に大事です。特に面接などではポートフォリオの中身をじっくり見る時間が無く、トップページのパッと見の印象で評価されてしまうケースも珍しくありません。なので、短時間でパッと見の印象である程度人の目を惹きつける、「ツカミ」が必要になってきます。
デザインとは結局は引き出しの中身の多さが物を言うので、色々な物を見て、使えそうな物はどんどん真似していきましょう。
特に一番最初にユーザーの目に触れる、ヘッダーのデザインというのは非常に大事で、ヘッダーの出来でそのサイトの雰囲気が決まってしまうと言っても過言ではないので、デザインをアピールしたい人は色々な工夫をして、「ツカミ」を入れて見ましょう。
ハンバーガーメニュー
<html lang="ja"> <head> <meta charset="utf-8"> <title>RWD-ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width"> <style> html,body,p,ul,li,a{ margin: 0; padding: 0; line-height: 1.0; } ul{ list-style: none; } a{ text-decoration: none; } /*PCレイアウト*/ P{ display: none; } nav { width: 100%; background:#77CCF0; margin: 50px auto 0; } #menu{ max-width: 960px; margin:0 auto; overflow: hidden; } #menu li{ float: left; width: 25%; height: 50px; box-sizing: border-box; } #menu li a{ display: block; line-height: 50px; text-align: center; background:#24A1F0; color: #fff; border-right: 2px solid #fff; } #menu li:first-child a{ border-left:2px solid #fff; } #menu li a:hover{ background:#77CCF0; } .box { width: 100%; height: 3000px; } footer { width: 100%; height: 200px; background: #EB8384; } @media screen and (max-width:767px){ p{ display: block; width: 100px; height: 100px; background: #24A1F0; border-radius: 8px; margin: 50px auto; position: relative; } span{ display: block; width: 60px; height: 6px; background-color: #fff; position: absolute; top:0; right: 0; bottom: 0; left: 0; margin:auto; border-radius: 4px; transition: 0.1s; } span:before{ display: block; content:""; width: 60px; height: 6px; background-color: #fff; position: absolute; top: -40px; right: 0; bottom: 0; left: 0; margin:auto; transition: 0.2s; border-radius: 4px; } span:after{ display: block; content:""; width: 60px; height: 6px; background-color: #fff; position: absolute; top:0; right: 0; bottom: -40px; left: 0; margin:auto; transition: 0.2s; border-radius: 4px; } p.click span{ background: transparent; } p.click span:before{ top: 0; transform: rotate(45deg); } p.click span:after{ bottom: 0; transform: rotate(135deg); } nav { width: 300px; height: 200px; margin: 0 auto; background:transparent; display: none; } #menu{ overflow: visible; } #menu li{ float: none; width: 100%; height: 50px; } #menu li a{ display: block; line-height: 50px; border-top: 2px solid #fff; border-right: none; } #menu li:first-child a{ border-left: none; border-top: none; } } </style> </head> <body> <p id="btn"><span></span></p> <nav> <ul id="menu"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> </ul> </nav> <div class="box"> </div> <footer></footer> </body>
モバイル・ファースト・インデックス、始めました！
3月27日、Googleが検索結果に使用するインデックスを今までのデスクトップ版のコンテンツから、モバイル版のページを使用する方法に切り替えました。
これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。 モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
詳しくはこちら
webmaster-ja.googleblog.com
今回の変更は、既にレスポンシブデザインで制作してあるサイトにはほとんど影響はありませんが、今後はスマートフォンでの表示速度が今まで以上に重要視されるので、cssやjsなどの記述などにも気を使うようにしましょう。
また、下記のサイトで表示速度が確認出来るので、確認してみましょう。
フレームワークとは？
フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
主なweb フレームワーク
React
Reactは、Facebookが開発したJavaScriptのフレームワークです。JavaScriptではGoogle製のAngularJSも有名なのですが、最近ではReactの名前を聞くことも多くなってきました。Reactの設計はFluxを用いていて、Webアプリケーションではフロント側の機能を担当します。Facebookで使われていることからもわかるように、規模の大きなアプリケーションに向いているフレームワークと言えます。
bootstrap
Twitter社が公開しているCSSフレームワークです。CSSと聞いてわかるとおり、WebサイトやWebアプリケーションのレイアウトをするための機能が豊富に揃っています。代表的なものとしては、グリッドシステムがあります。Bootstrapでは画面を12分割しています。このグリッドレイアウトを使うことで、CSSのプログラミングに慣れていなくても、自由にページ要素を配置することができるのです。リキッドレイアウトにすることも可能で、スマホ対応などのレスポンシブデザインも簡単に実現できます。
コーディングルールの設定
複数人でコーディング作業を進める場合、共通のルールや約束事を「コーディング規約」として事前に決めておきます。例えば担当者が独自の勝手なルールでコーディング作業を進めてしまうと、その担当者以外の者がコーディング作業する事が出来なくなってしまうため、サイトの「保守性」や「持続性」などを考えると、ルールが必要になってきます。また自身が制作したサイトでも、一度完成させた数年後に改修を行う事も珍しくないので、やはりルールを設定しておく必要があります。
ただ、あまり厳しいルールを設けると、逆に効率が落ちてしまい、結果として守られないルールになってしまうケースがあるので、その辺のバランスを上手くとる必要があります。
コーディング規約を大きく分けると「命名規則」「コーディング規則」「禁止事項」の3つに分類する事が出来ます。
命名規則
「id・class名」や「ファイル名」などをつける時に適当な名前にするのではなく、チームの他の人間が見た時に意味の解る物にする必要があります。
コーディング規則
インデントの付け方やネストのパターン、コメントアウトの方法など、コーディングする際の細かいルールも明文化しておく事で、サイトの「保守性」の高める事が出来ます。
禁止事項
禁止事項の場合も、出来るだけ具体的に挙げる事でサイトの「保守性」や効率を高める事が出来ます。
コーディング規約の実例
企業などが採用している実際のコーディング規約を参考にして見ましょう。コーディング規約やスタイルガイドは公開している企業はいくつかあるので、色々と参考にして見ましょう。
googleのコーディング規約
githubのコーディング規約
スプリットレイアウト(Split Layout)
スプリットレイアウト(Split Layout)とは
スプリットレイアウトとは、中央などの境界線をもとにコンテンツを分割したレイアウトの事です。例えば左右に分割し、画面を大きく使用することで、制約のあるウェブページを有効に使うことができ、また各コンテンツにおいて統一したデザインでなくてもうまくはまりやすく、クリエイティビティを表現しやすいのが特徴です。
