Webサイトのページ遷移について説明しよう

Talking about page transitions
新しい会社のウェブサイトに使うページ遷移の種類について話してみよう。
まずは既存のウェブサイトの問題点について話し合うことが大事でしょう。
What kind of transition would you suggest in this situation?
 
このレッスンを始める
Writingレッスンの例
Best Teacherで実際に行われている直近のWritingレッスンです。
作成したスクリプトは講師により添削されます。
What kind of transition would you suggest in this situation?
#miss

Your use of animation in these transitions is wonderful.
But waiting time for page loading is too long.
What is tha method does solve this problem?

#correct

Your use of animation in these transitions is wonderful. But the waiting time for the page to load is too long. What is the method to solve this problem?

Unfortunately our servers have been very slow and overloaded lately. We could solve the problem by purchasing more bandwidth. What do you think of this idea?
#miss

You are all right but we can't purchase new servers now.
Now that it's come to this,we must cut down animation.
Let's do simply.

#correct

You are right, but we can't purchase new servers now. Now that it has come to this, we must cut down the animation. Let's do it simple.

Alright then, I'll make things simpler but still nice, so don't worry. Did you have any other concerns?
#miss

Well,in terms of smartphone,there are many things on screen and I concern that users don't notice link button.
We should adjust information,shouldn't you?

#correct

Well, in terms of smartphones, there are many things on the screen and I'm concerned that users won't notice the link button. We should adjust the information, shouldn't we?

I think that's a smart idea. We should make it larger and easier to read. Also, I was thinking that when people click on the company logo it should take them to the "About" page. What do you think?
#miss

OK. Smartphone is the main device in this age. We must not ignore it.
Your idea is very good.
The about page is the important page which sent our corporate massage.

#correct

OK. Smartphone is the main device in this age. We must not ignore it.
Your idea is very good. The "About" section is an important section which sends our corporate massage.

I'm glad we agree on that. So, was there anything else you thought we should change? I'm not sure about what to do with the photo transitions. Should we keep them the same or change them too?
#miss

It keep now.But I want to change the shape.
Try to change square to round.
And it had better to change photo,too.
It is the photo of bear right now, I think it is better a hawk.

#correct

Keep it for now, but I want to change the shape. Try to change the square to circle. And it is better to change the photo, too. It is the photo of bear right now, I think it is better to put a hawk.

  • slider(滑るもの、滑る人)
  • tutorial(指導書)
  • dissolve(溶解させる、(画面を)ディゾルブにする)
  • slideshow(スライドショー)
  • overlay(オーバーレイ〔何かの表面を薄く覆うこと(あるいは覆うもの)〕)
  • animation(アニメーション)
  • thumbnail(サムネイル(画像や文書を小さく表示[印刷]したもの))
  • fullscreen((形)全画面表示の (副)全画面表示で)
  • fold paper(紙を折る)
  • flip(〔指などで〕軽くはじく[たたく]こと)
  • This paper-fold transition effect reminds me of Japanese "origami".(このペーパーフォールド遷移効果は日本の「折り紙」を思い出させる。)
  • If you tell me what you want the transition to look like, I will create it for you.(切り替えのイメージを伝えていただければ、それに合わせて作成します。)
  • Your application of the overlay effect in these first few pages is very effective.(この最初の数ページでのオーバーレイ効果はとても効果的です。)
  • When you click on a box, it will become fullscreen and the others will fade out.(ボックスをクリックすると、全画面になって他のページは消えます。)
  • This transition effect that you created is quite stunning.(あなたが作ったこの遷移効果は本当にすごいです。)
  • This online tutorial will teach you how to create various page transition effects for our new website.(このオンラインチュートリアルでは、新しいウェブサイトのための様々なページ遷移効果を作成する方法をお教えします。)
  • I like how one page dissolves into another, but can you speed up the dissolve rate?(ページが次のページにディゾルブする方法がいいですが、そのディゾルブのスピードを速めてもらえますか。※ディゾルブ:画面の溶暗)
  • Your use of animation in these transitions is amazing.(この遷移でのアニメーションの使用は素晴らしい。)
  • The effects shouldn't be too spectacular because they might undermine the contents of the webpage.(あまり派手な演出をすると、ページの内容が損なわれてしまうので注意が必要です。)
  • These transitions look almost three dimensional.(このページ遷移は3Dのようだ。)

こんな方にオススメ

  • ビジネス
  • 中級
  • ミーティング
  • 説明/釈明
  • WEBの話