What's New Qiita

20210308のCSSに関する記事は7件です。

  • 投稿日：2021-03-08T22:50:27+09:00

TailwindCSS入門①

TailwindCSSとは

CSSフレームワークであり、utility classを使って独自のデザインをすることができるので、カスタマイズしやすい。
Bootstrapだと簡単に設計しやすい分、似たようなデザインになってしまうことがあるのが欠点ですが、Tailwindではオリジナリティ高いデザインを実現できます。

TailwindCSSを学ぼうと思った理由

単純に流行っているから

はじめに

長めになりそうなので、何回に分けて投稿したいと思います！
また、超絶初心者なため、間違いがあれば指摘お願いいたします。

TYPOGRAPH(文字)

文字の色

<p class="text-red-400">赤文字</p>

text-(色)-(数値)ように書くことで色を変えることができます。
数値が大きいと濃い色になり、小さいと薄い色になります。

文字の大きさ

<p class="text-xs">文字の大きさ(xs)</p>
<p class="text-sm">文字の大きさ(sm)</p>
<p class="text-base">文字の大きさ(base)</p>
<p class="text-lg">文字の大きさ(lg)</p>
<p class="text-xl">文字の大きさ(xl)</p>
<p class="text-2xl">文字の大きさ(2xl)</p>
<p class="text-3xl">文字の大きさ(3xl)</p>
<p class="text-4xl">文字の大きさ(4xl)</p>
<p class="text-5xl">文字の大きさ(5xl)</p>
<p class="text-6xl">文字の大きさ(6xl)</p>
<p class="text-7xl">文字の大きさ(7xl)</p>
<p class="text-8xl">文字の大きさ(8xl)</p>
<p class="text-9xl">文字の大きさ(9xl)</p>

下に行くに連れて文字は大きくなっていきます。

文字の太さ

<p class="font-thin">文字の太さ(font-thin)</p>
<p class="font-extralight">文字の太さ(font-extralight)</p>
<p class="font-light">文字の太さ(font-light)</p>
<p class="font-normal">文字の太さ(font-normal)</p>
<p class="font-medium">文字の太さ(font-medium)</p>
<p class="font-semibold">文字の太さ(font-semibold)</p>
<p class="font-bold">文字の太さ(font-bold)</p>
<p class="font-extrabold">文字の太さ(font-extrabold)</p>
<p class="font-black">文字の太さ(font-black)</p>

下に行くに連れて太くなっていきます。

margin padding

m-(数値）としていすることで使うことができます。
また、top、right、left、buttomの頭文字をとって、mt-(数値)、mr-(数値)、ml-(数値)、mb-(数値)と書くことで各方向にmarginをつけることができます。(paddingも同様)

<!--全方向にmargin-->
<div class="m-16">marginつけました(全方向にmargin)</div>
<!--全方向にpadding-->
<div class="p-16">padding(全方向にpadding)</div>

<!--上にmargin-->
<div class="mt-16">marginつけました(上にmargin)</div>
<!--上にpadding-->
<div class="pt-16">padding(上にpadding)</div>

<!--右にmargin-->
<div class="mr-16">marginつけました(右にmargin)</div>
<!--右にpadding-->
<div class="pr-16">padding(右にpadding)</div>

<!--左にmargin-->
<div class="ml-16">marginつけました(左にmargin)</div>
<!--左にpadding-->
<div class="pl-16">padding(左にpadding)</div>

<!--下にmargin-->
<div class="mb-16">marginつけました(下にmargin)</div>
<!--下にpadding-->
<div class="pb-16">padding(下にpadding)</div>

また、下記のように書くことでx、y方向に指定することもできます。

<!--x方向にmargin-->
<div class="mx-16">marginつけました(x方向)</div>
<!--x方向にpadding-->
<div class="px-16">padding(x方向)</div>

<!--y方向にmargin-->
<div class="my-16">marginつけました(y方向)</div>
<!--y方向にpadding-->
<div class="py-16">padding(y方向)</div>

幅と高さ

<div class="w-20 h-20 bg-green-100">高さ幅</div>

w-(数値)、y-(数値)と書くことで幅と高さを指定できます。

ボーダー

<div class="border border-indigo-600">border</div>

このように書くことでborderをつけることができます。
また、border-(数値)で指定することでborderの太さを変更できます。

<div class="border-4 border-indigo-600">border</div>

背景色

<div class="bg-red-400">背景色</div>

bg-(色)-(数値)で書くことで背景色をつけることができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T21:36:49+09:00

CSS　アニメーション

目次

  1. transitionについて
  2. animationについて

1. transitionについて

transition

  • スタイルの変更の開始時から終了時までの挙動を設定する
  • 開始時と終了時を定義するには？
    • :hoverなどの疑似クラス(:active, :focusなど)を使用する
    • javascriptを使用して、CSSのプロパティを変更する

例

css(transition)
.sample {
  background-color: red;
  width: 200px;
  height: 200px;
  transition: all 0.5s ease-out;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

結果
ezgif-2-de02b8a0c7c2.gif

transitionのプロパティを個別に設定する場合

以下の4つのプロパティが存在する。

  • transition-property　トランジションを適用する対象のCSSのプロパティの名前を指定
  • transition-duration　トランジションにかかる時間を指定
  • transition-timing-function　トランジションの速度変化を指定
  • transition-delay　トランジションを開始するまでの時間を指定

transition-property
トランジションを適用する対象のCSSのプロパティの名前を指定

css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;     /* transitionの設定が適用されるのは、widthのみ */
  transition-duration: 5s;
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-propertyに設定できる値
・all　全てのプロパティ
・none　プロパティ未指定
・margin-rightなど個別のプロパティ

例

css(transition-property)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: all;     /* 全てのプロパティ(この場合、widthとbackground-color)が対象 */
  transition-property: none;    /* 未指定 */
  transition-property: width, background-color /* widthとbackground-colorが対象 */
  transition-duration: 5s, 10s; /* 複数対応、widthが5sで、background-colorが10sで変わる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-duration
トランジションにかかる時間を指定

css(transition-duration)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;   /* 5sかけてスタイルが変更される */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-timing-function
トランジションの速度変化を指定

transition-timing-functionに設定できる値

  • ease　開始時と終了時は緩やかに変化
  • linear　開始から終了まで一定に変化
  • ease-in　開始時は緩やかに変化、終了に近づくと早く変化
  • ease-out　開始時は早く変化、終了に近づくと緩やかに変化
  • ease-in-out　easeよりもゆっくり入り、加速し、ゆっくり終わる
  • step-start　開始自転で終了状態の値に変化する
  • step-end　終了時点まで変化せず、終了時点で終了状態の値に変化する
  • steps(ステップ数、ディレクション)　時間的変化をステップ数の数にステップに等分に区切って不連続に変化させる 、ディレクションにはstart or endを指定する
  • cubic-beizer　自分でカスタムする
css(transition-timing-function)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;

  transition-property: width;
  transition-duration: 5s;

  transition-timing-function: ease;
  transition-timing-function: linear;
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: step-start;
  transition-timing-function: step-end;
  transition-timing-function: steps(6, end);
  transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transition-delay
トランジションを開始するまでの時間を指定

css(transition-delay)
.sample{
  background-color: red;
  width: 200px;
  height: 200px;
  transition-property: width;
  transition-duration: 5s;
  transition-delay: 5s;  /* 5s後にスタイルの変更が始まる */
}

.sample:hover {
  background-color: blue;
  width: 300px;
}

transitionのプロパティをまとめて設定する場合

個別に設定した時と同様、
* transition-property
* transition-duration
* transition-timing-function
* transition-delay
を設定する。

css(transition)
.sample {
  /* プロパティ名 | 時間 */
  transition: margin-right 4s;

  /* プロパティ名 | 時間 | 遅延 */
  transition: margin-right 4s 1s;

  /* プロパティ名 | 時間 | 時間関数 */
  transition: margin-right 4s ease-in-out;

  /* プロパティ名 | 時間 | 時間関数 | 遅延 */
  transition: margin-right 4s ease-in-out 1s;

  /* 2つのプロパティへの適用 */
  transition: margin-right 4s, color 1s;

  /* 変化するすべてのプロパティへの適用 */
  transition: all 0.5s ease-out;
}

2. animationについて

animation

  • キーフレームを利用したアニメーションを設定できる
css
@keyframes キーフレーム名 {
  0% { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  100% { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}
または
@keyframes キーフレーム名 {
  from { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
  to { 終点のキーフレーム：アニメーションさせたいプロパティの最終状態 }
}

例

css(animation)
/* 「%」は時間の割合を示す */
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation: my_anime 3s;  /* 3sかけてbackground-colorが変わっていく */
}

結果

画面収録-2021-03-08-21.11.29.gif

animationのプロパティを個別に設定する場合

以下のプロパティが存在する。

  • animation-name　アニメーション名（キーフレーム名）を指定
  • animation-duration　アニメーションにかかる時間（1回分）を指定
  • animation-timing-function　アニメーションの速度変化を指定
  • animation-delay　アニメーションを開始するまでの時間を指定
  • animation-iteration-count　アニメーションの繰り返し回数
  • animation-direction アニメーションの繰り返し方法（再生方向）を指定
  • animation-fill-mode ディレイ中と再生後の表示状態を指定
  • animation-play-state　アニメーションの再生と一時停止を指定

animation-name
アニメーション名（キーフレーム名）を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}

animation-duration
アニメーションにかかる時間（1回分）を指定

css(animation-duration)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;
}

animation-timing-function
アニメーションの速度変化を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-timing-function: ease;
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: step-start;
  animation-timing-function: step-end;
  animation-timing-function: steps(6, end);
  animation-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}

animation-delay
アニメーションを開始するまでの時間を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-delay: 3s;
}

animation-iteration-count
アニメーションの繰り返し回数

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-iteration-count: 2.5;
  animation-iteration-count: infinite;  /* infiniteで無限に繰り返す */
}

animation-direction
アニメーションの繰り返し方法（再生方向）を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-direction: normal;             /* 順方向にアニメーション */
  animation-direction: alternate;          /* 繰り返し時、偶数回は逆方向にアニメーション */
  animation-direction: reverse;            /* 逆方向にアニメーション */
  animation-direction: alternate-reverse;  /* 繰り返し時、奇数回は逆方向にアニメーション */
}

animation-fill-mode
ディレイ中と再生後の表示状態を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-fill-mode: none;       /* 元のスタイルのまま */
  animation-fill-mode: forwards;   /* 再生後、要素のスタイルは最後のキーフレーム状態のまま */
  animation-fill-mode: backwards;  /* 再生前、要素のスタイルは最初のキーフレーム状態に戻る */
  animation-fill-mode: both;       /* forwards, backwardsの両方を満たす */
}

animation-play-state
アニメーションの再生と一時停止を指定

css(animation-name)
@keyframes my_anime {
  0% {
    background-color: #f00;
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

.animation_test {
  width: 200px;
  height: 200px;
  animation-name: my_anime;
  animation-duration: 3s;

  animation-play-state: running;  /* アニメーションは実行中 */
  animation-play-state: paused;   /* アニメーションは一時停止している */
}

animationのプロパティをまとめて設定する場合

以下のような順番で設定が可能
animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返し回数 再生方向;

css
animation:sample_anime 0.3s ease-in-out 3s infinite alternate both;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T18:08:47+09:00

【CSS】white-spaceの使い方

プログラミング勉強日記

2021年3月8日

white-spaceとは

　テキスト内の改行・スペース・タブをどのように扱うか指定できる。

white-spaceの使い方

white-space: 値;

　この値には、normal, nowrap, pre, pre-wrap, pre-lineのどれかを指定する。
　
　normalは初期状態と同じで、HTMLを使用するときのいつも通り表示される。連続した半角スペース/tab/改行を全て1つの半角スペースとして表示し、改行は通常通り横幅いっぱいになったときに行う。
　nowrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。テキスト内で改行を行われた場合に改行する。
　preは、半角スペース/tab/改行をそのまま表示し、改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行する。
　pre-wrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行は横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、preと同様に半角スペース/tab/改行をそのまま表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。

これらを表にまとめると以下のようになる。

値 表示の説明 改行の説明
normal（初期値） 連続した半角スペース/tab/改行を全て1つの半角スペースとして表示 横幅いっぱいになったときに改行
nowrap 連続した半角スペース/tab/改行を全て1つの半角スペースとして表示 テキスト内で改行を行われた場合に改行
pre 半角スペース/tab/改行をそのまま表示 改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行
pre-wrap 半角スペース/tab/改行を全て1つの半角スペースとして表示 横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行
pre-line 連続した半角スペース/tab/改行を全て1つの半角スペースとして表示 横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行

参考文献

CSSで改行ルールを簡単設定！改行をコントロールする方法
white-space

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T11:27:05+09:00

アニメーション

アニメーションをまとめます。

チェックボックス

チェックマークがいい感じにつく

ezgif.com-gif-maker.gif

<input type="radio" name="test" id="test1">
<label for="test1">チェックボックス</label>

input[type="radio"] {
    display: none;
}

input[type="radio"]+label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="radio"]+label:last-child {
    margin-bottom: 0;
}

input[type="radio"]+label:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #6cc0e5;
    position: absolute;
    left: 0;
    top: 3px;
    opacity: .8;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input[type="radio"]:checked+label:before {
    width: 10px;
    top: -1px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

ツールチップ

text.blade.php
<button type="button" class="btn--circle btn--circle-c btn--shadow tooltip1 bookshelf_store_js" data-id="{{ $novel->id }}">
    <i class="fas fa-book-medical"></i>
    <div class="tooltip_content">本棚に追加</div>
</button>
text.scss
//ツールチップ
.tooltip1 {
    position: relative;
    cursor: pointer;
    display: inline-block;

    i {
        margin: 0;
        padding: 0;
    }

    & .tooltip_content {
        display: none;
        position: absolute;
        margin: 1.5em 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        color: #555;
        font-size: 0.9rem;
        background: #FFF;
        border: solid 2px $border_color;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px $border_color;
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            top: -24px;
            left: 50%;
            margin-left: -15px;
            border: 12px solid transparent;
            border-bottom: 12px solid #FFF;
            z-index: 2;
        }

        &:after {
            content: "";
            position: absolute;
            top: -30px;
            left: 50%;
            margin-left: -17px;
            border: 14px solid transparent;
            border-bottom: 14px solid $border_color;
            z-index: 1;
        }
    }

    &:hover .tooltip_content {
        display: inline-block;
        top: 35px;
        left: -40px;
    }

}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T10:34:03+09:00

初学者のJavaScript　開閉機能のプログラミング

jQueryでtoggleClassメソッドを利用した開閉機能

  $(document).ready(function(){
    $('#button').on('click', function(){
      $('#hoge').toggleClass('show');
    });
  });

HTML要素のhoge(ID名)にtoggleClassでshowをクリック時に追加、削除するプログラム。クラスセレクタshowにCSSを記述しておくことで、表示/非表示をクリック時に切り替えることができる。

showのCSS
.show {
  transform: translate3d(-300px, 0, 0);
}

アニメーション
#hoge {
  transition: transform 0.3s;
}

showが付加されるとページ全体が左に300px移動する（-300px）。すると、ページ左に見切れているサイドメニューがページ全体がスライドすることで見られるようになる仕組み。transitionによってアニメーションを付加している。

さいごに

プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T07:18:21+09:00

ChromeとFirefoxで印刷用CSS（@media print）を確認する方法

最近よく聞かれる気がするので2021年3月時点の情報を明記しておきます?
Firefoxはなかなかわかりづらい( ˘ω˘ )

Google Chromeの場合

※ macOS Canary 91 で確認

  1. 開発者ツール右上の三点リーダメニューを開く
  2. 「More tools」を選択
  3. 「Rendering」を選択

image.png

Emulate CSS media type から「print」を選択

image.png

Mozilla Firefoxの場合

※ macOS Firefox 72 で確認

  1. 開発者ツールを開きます
  2. スタイルを操作・確認できるペイン右上のボタンを押します

image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-03-08T01:08:52+09:00

営業の私がGoogle Apps Script【GAS】を使って営業の業務を自動化・効率化していく話。

はじめに

※この記事は随時更新しています。(最終更新日：2021/3/8 業務フロー大枠を更新)
※この記事は私が仕事している企業の状況等を記載しておりますが、企業内の機密情報は一切記載しません。そのため一部表現を変えたり情報をマスクしていますがご容赦ください。

私は小さなIT企業で営業をしています。
もともとはエンジニアでしたが、会社都合で入社から3年後にして営業をしています。(謎)
営業の業務って本当に無駄な業務が多いんですよね・・・。

特に私の今いる会社では、人数がとても少ないので、一言で営業といっても単に顧客へのセールスだけが仕事というわけではありません。

契約等の事務処理、契約書作成、プロダクト開発、マーケティング、広報・・・
あげればキリがありません。もはや万屋です。

[営業]という切り口から、現在の繰り返しの業務を上げると、たくさん出てきます。
・CRMでの案件作成
・見積書の作成・提出
・契約書の作成・提出・受領
・契約書の締結
・稟議起案・押印
・CRMでの案件情報更新
・顧客への案内(契約書、見積書の送付等)

こんな同じことの繰り返し業務を営業は当たり前のようにやっているわけです。
もう、やめませんかこんな単純な作業と訴えたいのが私の思いであり、誰もやっていないところだったので、
自分が上記の業務を全部効率化・自動化したったろ！というのが志であります。

というわけで、この記事では、私が日頃行う業務をGASをつかってどうやってどのくらい効率化・自動化できるかをまとめて行くことにします。

会社で使っているツール一覧

  • プラットフォーム：Googple Gsuite
  • コミュニケーション：Slack
  • SCM：Salesforce
  • BIツール：TableauOnline(念の為)
  • 稟議：承認Time

自動化・効率化の前にやるべきこと

業務を自動化する上で、実際にコーディング(自動化)する前にやるべきことがあります。

  • 現状の業務フローを整理(大枠からPCの操作レベルまで詳細を整理)
  • 自動化・効率化するためのフロー設計
  • モックアップ作成

とはいえ、上記ができるのは過去に経験者であればできると思いますが、私は一連の流れを経験したことがないので、
できるだけ上記をまず優先的にやりつつも、試験的にコーディングを並行してやって行くことにします。

業務フローの整理(大枠)

以下に、営業のメンバーが行う大枠の業務フローです。
これを１案件ごとにやっており、1日に一人あたり10件程度裁いています。
(しんどいです・・・・・・)

  1. 見積書作成
    1. [会社名]・[見積No]・[金額]などの項目を見積書に記入
    2. 完成した見積書をPDF形式でダウンロードして指定のフォルダに保存
  2. 申込書の作成
    1. 申込書に必要な情報記入
    2. EXCEL形式で新しくファイルを指定のフォルダに保存
  3. 作成した見積書・申込書・利用規約をメールでクライアントに送る
    1. メール文を作文
    2. 見積書・申込書・利用規約をメールに添付
    3. メール送信
  4. クライアントの申込書内容の確認
    1. 記載内容が正しいかを確認
    2. 確認後、押印してpdfと原本を要求
  5. CRMの情報更新
    1. CRMの明細情報更新
    2. 案件フェーズを見積・契約対応に変更
  6. 稟議起案
    1. 稟議を作成(必要情報の記入)
    2. 見積書・申込書の添付
    3. 申請
  7. 稟議承認後に書類の押印申請用の稟議を申請
    1. 稟議押印申請→こちらは担当が別にいるため、担当者に依頼する。
  8. 納品対応
    1. 納品対応
  9. CRM情報更新
    1. 案件フェーズを[商談成立]に変更
  10. 納品書・請求書作成対応
    1. 納品書・請求書の作成を依頼する。
  11. 納品書・請求書等の提出

業務フローのグルーピング化

上の業務フローを見てみると、以下のようにフローをグルーピングできると思います。

  • 資料作成(見積書、申込書の作成等)
  • メール送信(案内、納品書、請求書提出等)
  • 稟議起案
  • CRM情報更新
  • 担当者への依頼
  • 納品

上記の機能が一つの画面でボタンぽちぽちすれば実行される・・みたいなことができたら最高です。
また、上記グルーピングした業務の中で、詳細業務をリスト化していきます。

  • 資料作成
    • 見積書作成
    • 申込書作成
  • メール送信
    • 見積書・申込書・利用規約を送る。
    • 納品後に案内する
    • 納品書・請求書を提出する。
  • 稟議起案
    • 稟議を起案する
  • CRMの情報を更新する
    • 明細を作成する
    • 案件フェーズを変更する
  • 担当者へ依頼する
    • 稟議(押印申請)を依頼する。
    • 納品書、請求書の作成を依頼する。
  • 納品
    • 納品する

このようにグルーピングすることで、資料作成→見積書→みたいな形で選択できるようにすれば、シンプルな画面設計・フローにすることができます。上記記載のように、大きなフローは全部で６個存在することがわかりました。

モックアップ

※随時更新します。

コード

　※随時更新します。

まとめ

　※随時更新します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧