newcal

京急沿線の魅力を掲載するサービスサイト、ニューカルのコーディングを担当しました。

制作概要

WordPress化など最終的な実装は別業者のため、HTML・CSS・JSで見た目の部分を作ることが主な役割でした。
とはいえ、動的になった場合も見越して組んでいく必要があったため、WordPressの実装経験が大いに役立ちました。

デザインはFigmaで、ページやパターン差分などが順次更新されていく中、フィックスしている部分を勧めていくという形でした。
はじめに全体を把握することができなかったため、どの部分が共通要素なのかがわからなかったりと進めづらい部分もありましたが、担当者とキャッチボールを重ねながら無事走り切ることができました。

※Myページなどの閲覧には会員登録の必要があるため、納品時データをご覧ください。
　目次：https://newcal.mne3.com/mokuji.html

制作ページ・パターン

※リンク先は納品時のデータです。

• TOP_Mynewcal登録済
• TOP_Mynewcal登録前
• TOP_読み込み中
• 特集
• スポット
• イベント
• 絞り込み一覧
• 絞り込み一覧（複数行）
• 絞り込み一覧（該当なし）
• おトクなきっぷ
• – みさきまぐろきっぷ
• – 葉山女子旅きっぷ
• – よこすか満喫きっぷ
• – 三浦半島まるごときっぷ
• – 弘明寺みうら湯きっぷ
• – 東京湾フェリーきっぷ
• – おトクなきっぷ詳細（フォームアラートあり）
• – おトクなきっぷ詳細（ログイン前）
• – おトクなきっぷ詳細（読み込み中）
• マップ
• マップ（絞り込み エリア選択後）
• マップ（絞り込み カテゴリー選択後）
• マップ（絞り込み きっぷ選択後）
• マップ（絞り込み シェアサイクル選択後）
• マップ（読み込み中）
• Myページ
• Myページ（チケット・予約なし）
• Myページ（読み込み中）
• 予約サービス
• newcal Enjoy Navi
• 使い方
• newcalプロジェクトとは

• 特集詳細-ベーシック
• 特集詳細-おすすめルート
• 特集詳細-ランキング
• 特集詳細-ランキング（お気に入り追加済み）
• 特集詳細-ピックアップ01
• 特集詳細-ピックアップ02
• 特集詳細-ピックアップ03
• 特集詳細-ピックアップ04

命名規則

クラス名など命名規則の指定は特になかったものの、一つのスタイルシートで納品ということで、
大まかではありますがBEMのルールに則って構築しました。
理由としては、クラス名がユニークになることで他のCSSとの競合を避けられる点や、
クラス名から構造がわかりやすく、どのスタイルがどの要素に適用されているのかなどを把握しやすいためです。

注力した点

モバイル特化型サイトの特徴として、PCでは画面のどこでマウスホイールしてもコンテンツ部分だけがスクロールしていかなければいけません。
むやみにoverflow: hiddenで隠してしまうとスクロール自体ができなくなってしまうなど、調整には時間を要しましたが、試行錯誤の上CSSのみでレイアウトを実現しました。

レスポンシブ対応

ある程度画面幅が狭まると2カラムになり、コンテンツエリアが広がる指定がありました。
そのため、モバイル幅のみのスタイルだけでなく、中間サイズに関しては伸び縮みもケアしつつコーディングを行いました。

enjoy navi ページ：https://newcal.jp/enjoy-navi

きっぷページ：https://newcal.jp/tickets/