Portfolio

Toshiyuki Sekine

ブックカフェ

タイトル:図書喫茶エンデ
担当範囲:設計/デザイン/実装(Studio)

ブックカフェという業態が馴染みのない地域での、認知と理解という課題解決を目的に制作したサイトです。

スマートフォンでのデザインは
QRコードから実機で確認頂けますと幸いです

構成

心理的な切り替えと読後の余韻を残す狙い

導入部の暗いトーンで日常の喧騒から離れた静寂感、中盤の明るいトーンで実用情報を提示する「明暗の切り替え」により、世界観への没入と情報の取得を両立させています。

ページ末尾で再びダークトーンへ戻すことで、一冊の本を読み終えたような満足感を与え、心地よい余韻とともに来店への意欲を高めます。

機能

実用情報の目印化と心理障壁の緩和

「お知らせ」を白背景のカードで配置し、情報をユーザーが迷わず正確に読み取れるようにしました。

サイト全体のダークトーンに対し地図が明るい「情報源」として浮き上がることで実用セクションであることを明確にし、場所への不安を解消し来店を促します

スタイル

温度感のある静寂や読書的な世界観の表現

写真は暗所×暖色寄りで統一され、冷たい無音ではなく人の気配が残る静けさになります。背景の明るい面には微細な質感を薄く乗せ、本文の読みやすさと穏やかな静けさの視覚化を両立しました。

文字組の工夫で視線の移動や読むリズムをコントロールしています。独文の大きなセリフ体は読ませる情報ではなくクライアントの事業に対する想いや世界観を表現しています。

https://ende-books.studio.site/

会計事務所

タイトル:関根会計事務所(Demo site)
担当範囲:デザイン/実装(Studio)

老舗の会計事務所が現状の顧客を維持しつつ、新規獲得に向けてのリニューアルを想定したサイトです。

スマートフォンでのデザインは
QRコードから実機で確認頂けますと幸いです

構成

情報の納得度を高め、スムーズな検討を促す

セクション間隔とコンテンツ周りの余白を大きく取り、情報の混線や視覚的な圧迫感を防ぎ、情報の圧を下げて理解の入口を作る。

大きい章タイトルを固定し、スクロール中でも現在地と重要度の誤読を防ぐ。

機能

アクションへの心理的障壁を取り除き、導線を迷わせない

次に何をすべきか、どこを押せばいいかが瞬時に分かり、検討が滞りなく進むよう誘導。

CTAへのグラデーションを使うことで画面内の他要素と質感を差別化し、視線を自然にアクションへと誘導する目印にする。

スタイル

老舗の信頼と、パートナーとしての親しみやすさを両立

深みのあるテールグリーンのアクセント使いで誠実さと知性を担保し、派手さを抑えることで会計事務所としての権威性を維持する

自然光を活かした人物写真の選定 で安心感を与え、会計業務特有の冷たい事務的印象を払拭する。

https://demo-site-01.studio.site/

動物病院

タイトル:ぽらりす動物病院(Demo site)
担当範囲:設計/デザイン/実装(Studio)

町の動物病院として親しみと安心感のある表現で、立ち位置を明確にすることで差別化を目的としたサイトです。

スマートフォンでのデザインは
QRコードから実機で確認頂けますと幸いです

構成

感情的な共感から論理的な安心へと繋ぐ情報の階層化

感情(FV)から実益(診療時間)への即時接続で病院の雰囲気に安心した直後、最短で「いま診てもらえるか」の疑問を解消する。

信頼を積み上げるセクション順(理念→特徴→診療内容)は病院の姿勢を理解した上で具体的なサービスを確認でき、納得感を高める。

機能

迷いや誤読を防ぎ、スムーズなアクションを促す設計

高コントラストな黄色の予約ボタン(CTA)は視覚的な最優先事項として機能させ、予約という最終目的に迷いなく導く

診療時間表はアイコンで文字情報を記号化するなど、休診日などの重要情報を瞬時に、かつ正確に判別させる。

スタイル

医療の冷たさを排除し、寄り添う姿勢を視覚化するトーン

暖色系のベージュ背景と角丸が医療機関特有の無機質さを打ち消し、家庭のような温かさを演出します。

手描き風のあしらいと肉球モチーフが「動物第一」のアイデンティティを強調し、親しみやすさをブランドイメージとして定着させる。

https://demo-site-02.studio.site/

ギャラリーサイト

タイトル:FairyCanvas
担当範囲:WEB最適化/実装(Studio)

イラストがもつ絵本のような世界観を表現するためのギャラリーサイトです。イラストレーターさんのイメージをWEBサイトとして最適化しました。

スマートフォンでのデザインは
QRコードから実機で確認頂けますと幸いです

構成

情報の雑音を排除し、作品の世界観のみを抽出して提示する

スクロールのない固定画面構成が物理的な「操作」を最小限に抑え、意識を作品の細部へと集中させます。

イラストを右側に据えた非対称レイアウトが左右の重みをあえてずらすことで、絵本を開いたような情緒的なリズムを生んでいます。

機能

利便性よりも、発見の喜びと世界観の整合性を重視する

蝶や月、植物をモチーフにしたオーナメント を画面左側に配置することで、UI(機能)を物語の背景へと昇華させる。

機械的な操作感を感じることなく、自然な流れで作品を切り替えて鑑賞できる。

スタイル

デジタル画面を感じさせない、手仕事のぬくもりを表現する

手書き筆記体のブランドロゴが作者の人柄が感じられるような役割を果たし、パーソナルなギャラリーであることを示す。

淡い配色が作品に使用されている水彩のようなタッチと調和し、視覚的な刺激を和らげています。

https://fairycanvas.studio.site/

料金表

料金は内容と範囲により変動します。ここでは目安のみ掲載しています。詳細は要件を確認のうえお見積りします。

詳細ページへ

お問い合わせ

Portfolio

Toshiyuki Sekine

© 2026 Web Studio MISE