しゃーしゃ

アニメが好きな24歳です。 web担→フロントエンドエンジニア になるよ。DailyUIとPythonに挑戦中。

しゃーしゃ

アニメが好きな24歳です。 web担→フロントエンドエンジニア になるよ。DailyUIとPythonに挑戦中。

マガジン

  • Daily UI

    Daily UI挑戦記。 デイリーにならないけどちまちまチャレンジしていきます。

最近の記事

お勉強ジャンルの乗り換え

こんばんは。しゃーしゃです。新宿御苑の年パスを買いました。(自慢) 新生活が始まり2日目。職場から駅までの道のりにコンビニやカフェなどの誘惑が多い中、今のところはまだ買い食いはしていないぞ!えらい!笑 肝心のお仕事はというと、今のところ実務はまったくやらずちまちまとお勉強をしている日々です。 ただ、「実務で使いそうなAdobeXDでDailyUI挑戦と、Pythonやる!」という意気込みとは裏腹に最初に使うのはPHPになりそうだ、、! ということで(?) 一旦急を要す

    • Daily UI #013 Direct Messaging

      11時半までに家を出なければかつ#012がちょっと重そうなので後回しにします。。 #013 Direct Messaging DM画面です。 けっこうDMの画面って要素は似ている他サービスを見てみると、下記要素から「誰が・いつ・何を」送ったかがわかるUIになっていることが多かった。 相手のアイコン 相手のアカウント名 メッセージ メッセージの送信日時 メッセージ以外のリアクション 字きったねえ… 上記を踏まえた上でUIの作成を行います。 と思いつつこっちも他サービス

      • とんでもない量の炒り豆腐ができた

        生協の時短ごはんセット? の炒り豆腐を作ってみた。 カット済みの材料をぱらぱら混ぜていくだけでできてしまった…!たぶん調理時間5分くらいでぱぱっと。すごい。 みじんぎりの練習がてら、今度はレシピに沿って自分で作ってみよう〜!

        • Daily UI #011 Flash Message(Error/Success)

          SUCCESS!って良い言葉ですよね。(脈絡のないあいさつ) 今日もDailyUI挑戦していきます。 #011 Flash Message(Error/Success) 何かの処理が完了またはエラーが発生した際に表示されるメッセージ…ポップアップと言うのが馴染みがある気がします。 実はあまり記憶にないFlashメッセージ見出しのとおり、お恥ずかしながらFlashメッセージの事例があまり浮かんでこず…イメージ的にはiPhoneの\ポキーン/でしょうか(伝われ) Flas

        マガジン

        • Daily UI
          12本

        記事

          Daily UI #010 Social Share

          「月曜〜金曜のお昼頃更新」を見事に破りました。 そして来週から無事(?)社会復帰を果たすのでマガジンの説明文変えなきゃな…笑 遅ればせながら、本日のDailyUIもやっていきます。よろしくお願いします。 #010 Social Share ソーシャルメディアでシェアする用のパーツです。 ページ全体とかじゃなくてパーツとしてのデザインをするのは#005のアプリアイコン以来とかかしら…。 他サービスを見てみた実は今回のお題、個人的には前々から気になっていたことがありまして。

          Daily UI #010 Social Share

          Daily UI #009 Music Player

          ノートPCがひんやりして手がかじかむ季節になってきましたね。。。 今日もDailyUI挑戦していきます。 #009 Music Player 音楽プレーヤーです。 と言いつつも普通に音楽を聴くだけならiPhoneの標準プレーヤーで全然事足りちゃうなあと思ってしまったので、今回はいわゆる「耳コピ用プレーヤー」を想定して作成してみようと思います。 耳コピとは? 楽器の演奏において楽譜を読まず曲を聴いて演奏を真似することです(という認識)。その名の通り耳でコピー。 「楽譜が用

          Daily UI #009 Music Player

          Daily UI #008 404 page

          猫派?犬派?と聞かれて「どっちも」と答える、強欲女子ことしゃーしゃです。 今日もDailyUI挑戦していきます! #008 404 page 404エラー(ページが見つからない)が発生した際に表示されるページのことです。 404ページもUXデザインの一部…?いつものようにさまざまなサイトの404ページを探してみました。 404ページへのリダイレクトをせずにエラーメッセージが記載されるページもあったが、面白コンテンツがあったり別の方法で情報にたどり着ける導線を引いてあげた

          Daily UI #008 404 page

          Daily UI #007 Settings

          11月から有給消化に入っていましたが、なが〜〜い夏休みも残すところあと10日ちょいとなりました。 のんびり過ごしすぎて無事に社会復帰できるか不安になってきているところです。。 気を取り直して本日のお題です。 #007 Settings いわゆる設定画面です。 今回は引っ張りハンティングでおなじみの「モンスターストライク」の設定画面の内容を一部拝借してデザインに挑戦します。 実際の画面はこんな感じ。ごつごつしていて機械を操作している感がゲームの世界観をアレしててかっこい

          Daily UI #007 Settings

          Daily UI #006 User Profile

          無職でずっとお休みのはずなのに、土日はがっつりお休みとして遊んでいました。えへえへ 今週もDailyUI挑戦していきます! #006 User Profile プロフィール画面ですね。 今回は「興味のある領域の似ている人同士でつながりやすい学習系コンテンツ投稿サービス」を想定してプロフィール画面を作ってみようと思います。 プロフィールにはどんな情報が必要?各サービスのプロフィール画面を見てみると、共通しているのはユーザー名・アイコンなどの「ユーザーを識別する情報」。 サ

          Daily UI #006 User Profile

          Daily UI #005 App Icon

          DailyUIを始めてから、前回初の「スキ」をいただきました!ありがとうございます( ੭ꠥ⁾⁾˃̶͈̀ロ˂̶͈́)੭ꠥ⁾⁾うれしい! 今回もがんばりまーす! #005 App Icon アプリアイコン。そのまんま。 サービスの設定今回は「万歩計」のアプリを作ります。 最近見ているYoutube動画で万歩計が大活躍しているのでふと思い立った次第。 そういえばアプリアイコンって2種類に区分できない?自分のホーム画面を見てみるとアプリアイコンの種類には大きく2種類があった。

          Daily UI #005 App Icon

          Daily UI #004 Calculator

          普段何気なく使っているものって「何気なく」使えるくらい自然な動きができる設計なんだなってことに気付かされた4回目のDailyUIです。 #004 Calculator 電卓とか計算機とか。 サービスの設定スマートフォンで使うけど、最低限の機能はつけておきたいよねということで、メモリー計算機能と計算式を入れてみることに挑戦してみました。 ベースはiPhoneに標準搭載されている計算機アプリです。 目的実機との違和感なく電卓を操作できる UIの内容PCで電卓操作をするシー

          Daily UI #004 Calculator

          Daily UI #003 Landing Page (above the fold)

          3回目のDailyUIです。難しかった… #003 Landing Page (above the fold) いわゆるランディングページのファーストビューと呼ばれる部分です。 サービスの設定香水の好みなどに答えていくつか候補をピックアップしてくれる架空のサービスを想定しました。 香りは実際にためしてみないとわからない、つまりweb上だけで完結する行動ではないので、うまく実店舗とつなぎこみをする仕組みを考えたかったのですが今回は取り急ぎお題の遂行を…。 目的商品購入の前

          Daily UI #003 Landing Page (above the fold)

          Daily UI #002 Credit Card Checkout

          2回目にして早速デイリーでなくなったDailyUI。。涙 とはいえ続けることがきっと大事なのだと信じて今日もがんばります。 #002 Credit Card Checkout クレジットカードの決済画面です。 サービスの設定今回は実在するサービスの「小田急ロマンスカー」の座席予約時の支払い入力画面を題材にしてみました。 飲み会や仕事がしんどかったときの帰りに月2、3回くらいのペースでお世話になっています。ありがとう小田急。。 (そして個人的に車内販売のカットラスクが超絶お

          Daily UI #002 Credit Card Checkout

          Daily UI #001 Sign Up

          ものはためしということで。 早速 #Daily_UI 1つめのお題をやってみました。 #001 Sign Up いわゆる「新規登録画面」にあたるようです。 サービスの設定とある映画のティザーサイトをイメージしました。 公開情報がまだサイトにないため、最新情報をメールマガジンで提供するサービスです。 目的メイン:メールアドレスを登録してもらう サブ:ティザーサイトを他SNSでシェアしてもらう UIの内容今回はスマートフォン向けUIを作成。 主に下記の点に注意しました。

          Daily UI #001 Sign Up

          ぶとうかがそうりょになる準備をしてみる

          意訳:web担だった人間がフロントエンドエンジニアとして第二のキャリアを始められるようにがんばってみる。こんにちは。しゃーしゃです。 ROM専だったnoteにとうとう初投稿! 会社を退職しまして、次の職場への入社までに1ヶ月近くおやすみができました。できましたといいつつ意図的に作りました。(いぇい!) 旅行しちゃおうかな〜とか免許取りに行こうかな〜とかも思ったけど、 せっかくだから転職後使いそうな新しいことをはじめてみたい! ということで以前から気になっていた「Daily

          ぶとうかがそうりょになる準備をしてみる