読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

モバイルファーストを意識したレスポンシブデザインサイトの制作

f:id:yachin29:20151120003303p:plain

モバイルファースト

モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際に、携帯端末での使いやすさを常に優先すること。

とありますが、モバイルファーストとは単にスマホレイアウトから作っていく、という作業手順の事では無く、ユーザーにとって必要なコンテンツや情報をスマホサイトにしっかりと入れ、見易さや使い易さも考慮して作っていく事が大切です。簡単に言うとスマホサイトで完結出来ているか、という事で、それをPCでみた際にも違和感が無いように手直しして行く事です。

業種にもよりますが、最近はPCよりもスマホからのアクセス数が多いwebサイトも珍しくありません。そもそもPCを持っていない人にとっては、スマホでネットを見る、という選択肢しか無いですし、PCを持っていても「ファーストスクリーン」がスマホ、というユーザーも少なくありません。なので、スマホサイトでもしっかりとユーザーのニーズに応える必要が出て来ます。

✕ PCサイトから余分な部分を削る
◯ スマホサイトで必要な物をしっかりと入れ、PCレイアウトで見ても違和感の無いように調整する

yachin29.hatenablog.com


使用する画像
http://yachin29.webcrow.jp/netsmart.zip


使用するテキスト
株式会社ネットスマート

メニュー

サービス紹介
実績紹介
会社概要
採用情報


メンテナンスのお知らせ


サービスピックアップ

CMS

SEO

ソーシャル

低価格&高機能なCMS導入。
充実の管理画面でサイト運用を効率的に。

検索ワードを短期間で上位表示。
スマートフォンサイトにも対応します。

Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。



サービス紹介

実績紹介

会社概要

採用情報





セミナー

2017年2月11日
テキストテキストテキストテキストテキスト

2017年1月19日
テキストテキストテキストテキストテキスト

2016年12月14日
テキストテキストテキストテキストテキスト

2016年10月10日
テキストテキストテキストテキストテキスト

2016年9月29日
テキストテキストテキストテキストテキスト



お知らせ

2017年2月18日
採用情報を更新しました

2017年2月11日
実績紹介を更新しました

2017年2月1日
サービスが紹介されました

2017年1月25日
社内ブログを開設しました



サイトマップ
プライバシーポリシー
サイトのご利用について
免責事項


©2017 Net Smart Co., Ltd. All rights Reserved.



まずはアコーディオンパネルを個別に作っていきましょう。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div class="seminar toggle">
<h2><a href="#">セミナー<span class="plus-icon close"></span></a></h2>
<dl class="infoLink show">
<dt>2017年2月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2017年1月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年12月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年10月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年9月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</div><!--/seminar-->

<div class="information toggle">
<h2><a href="#">お知らせ<span class="plus-icon"></span></a></h2>
<dl class="infoLink">
  <dt>2017年2月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2017年2月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2017年2月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2017年1月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</div><!--/information-->
</body>
</html>


完成例
http://yachin29.webcrow.jp/sp2/