とにかくリアルな日記帳

https://github.com/shuuuu10-01/shachihokodiary

HTML

JavaScript

CSS

Nuxt.js

Firebase

本物の日記帳を書いているかのような日記帳アプリ

Simo

推しアイデア

手書きしているような文字のアニメーションや柔らかいめくり心地のアニメーションに加え、リアルなデザインを取り入れたことでリアルを追求した。さらに消しゴムで文字を消せるように機能追加しました!

作った背景

とにかく無駄に○○というお題に対して”リアルな日記帳”という意見が採用された。

推し技術

turnjs / animejs / Photoshop

プロジェクト詳細

リアルな日記帳

このアプリは本物の日記帳を忠実に再現した日記帳アプリです。まるで本物があるかのような体験をすることができます。日記帳の機能はとてもシンプルで「見る、書く、編集する」の3つの機能から成ります。サイトに使われている写真はほぼ手作りです。実際に写真を撮りそれを加工して使っています。

日記帳の操作方法

・初めてアクセスする際は以下のURLからサインアップしてください。 ShachihokoDiary サインアップ

・閲覧状態から日記帳の横にあるペンをクリックすると編集が可能になります。

・編集状態では下部にある入力フォームで日記の内容を編集することができます。右ページの写真をクリックすると挿入する写真を変更することができます。

・編集状態で日記帳の左側のページをクリックすると編集が終了します。

開発を通して

今回はバックエンドを使わずにFirebaseでデータ連携やユーザー認証を行いました。そのため、フロントを4人全員で開発することができました。

ギャラリー

GoogleDrive しゃちほこギャラリー

メンバー

シモ Catgolem shuuuu ふぃる

Simo

@simosimo