Adobe XDデザインを見てCSS設計を決めるときに考えていること
Adobe XDのデザインデータを見てからCSS設計を決める際に、普段確認しているポイントをまとめました。コーディング前に意識している考え方や、構造の整理方法を紹介します。
Insights & Stories
MARBLEの自社メディア（ブログ / 動画）
新着ニュース
Adobe XDデータを受け取ったら最初に確認していること
Adobe XDデータを受け取ったあと、コーディング前に確認しているポイントを実務目線で整理。アートボードサイズやフォント、余白、SVG構造など、手戻りを減らすための事前チェック内容を具体的に紹介します。
Adobe XDでコピーしたSVGを実装しやすく整理した話
Adobe XDからコピーしたSVGをそのまま使った際に感じた違和感をきっかけに、Illustratorで整えてから実装する方法へ移行した体験談。SVG構造が複雑になる原因や整理手順、実装時に感じたメリットを実例ベースで紹介...
iPhoneのSafariでデバッグする方法
実機端末を使用したデバッグ方法をご紹介します。使用するのはMacとiPhoneです。簡単に行えるので、まだご存じない方はぜひ試してみてください。
【CSS】コンテンツ量が少ない時だけフッターを下部に固定する方法
コンテンツ量が少ないページをコーディングした際に、フッターの下に余白ができてしまったことから、コンテンツ量に応じてフッターの位置を変えるCSSを調べて実装してみました。備忘録として残していきたいと思いま...
Safariでclamp()が効かない場合の対処法
前回、CSSの比較関数（min・max・clamp）についてご紹介しました。主要ブラウザには対応していていても、<code>clamp()</code>は Safari で効かない場合があるようです。
【サンプルあり】今すぐ使える！便利な比較関数 min() max() clamp() のお話
CSSコーディングでとても便利な比較関数（数学関数）についてご紹介します。使う場面なども想定して記述方法をご紹介しているので、まだ使ったことのない方はぜひご覧ください。
CSS 子要素を親要素からはみ出して画面いっぱいに表示させる方法とWindowsブラウザの注意点
上の画像のように一部のコンテンツのみ背景色が画面いっぱいに広がって表示させるデザイン。コーディングする際に、いくつか方法と注意点があるのでご紹介します。
FlexboxとCSS Gridの違いについて調べてみた
こんにちは。CSSでレイアウトを組むときに、Flexboxが欠かせない存在になっている、satomiです。
Our Signature Products, Born from Insight.
提案から生まれた、
MARBLEの代表プロダクト
お客様の課題を起点に、MARBLEが自ら構想し、
仕組みからデザイン、開発、運用まで一貫してつくり上げたプロダクト群です。
業務改善、運営効率化、新たな顧客体験の創出など、
企業の事業成長に直結する“実装された解決策”を形にしています。
-
01 入退場システム
Entry System
全国15店舗、会員数50万人以上のこども向けパークで稼働する入退場・決済・顧客管理システム。
受付の効率化と回転率の向上を実現し、運営データの一元管理を可能にしています。 -
02 自動配送システム
Delivery Routing
50台のトラック、年間350日の配送を最適化する自動ルート生成システム。
紙のFAXで届く約500件の配送情報をデジタル化し、最適ルートを自動で算出することで、大幅な業務効率化を実現しました。 -
03 会話型コマース連携
Auto Routing
ライブチャットでの接客からEC購入までを一つの導線でつなぐ会話型コマースシステム。
リアルタイムの対話で顧客の購買意欲を高め、高いコンバージョン率につながる仕組みを構築しています。